/* =========================================
   RESPONSIVE — TABLET & MOBİL
   Kırılım noktaları:
     ≤1200px  küçük masaüstü / yatay tablet
     ≤992px   tablet
     ≤576px   mobil
   head.php içinde en son yüklenir.
   ========================================= */

img,
iframe,
video {
  max-width: 100%;
}

/* ---------------------------------------------------------
   1. KÜÇÜK MASAÜSTÜ / YATAY TABLET  (≤1200px)
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {

  /* Header: hamburger menü (logo her ekranda 100px kalır) */
  .aesop-glass-header.scrolled .header-logo-img {
    height: 100px;
  }

  .main-nav,
  .header-actions {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: flex-end;
    justify-content: center;
  }

  .header-inner {
    padding: 0 5vw;
  }

  .mobile-menu-overlay {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 120px 6vw 40px;
  }

  .mobile-nav a {
    font-size: 1.5rem;
  }

  /* Footer: logo+açıklama üstte, 4 kolon altında */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 28px;
  }

  .footer-about {
    grid-column: 1 / -1;
  }

  /* Tablet: logo + açıklama + sosyal ikonlar ortalı */
  .footer-about {
    text-align: center;
  }

  .footer-about .footer-logo img {
    margin-inline: auto;
  }

  .footer-about p {
    max-width: 520px;
    margin-inline: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ---- Ana sayfa hero (≤1199px: alt alta, görsel arkada sabit) ---- */
  /* Hero: görsel arkada sabit (katmanlı), içerik üstünden kayar */
  .pro-hero {
    height: auto;
    min-height: 92vh;
    min-height: 92svh;
    padding-top: 80px;
    background: var(--color-primary-dark);
  }

  .pro-hero-container {
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    height: auto;
    min-height: calc(92svh - 80px);
  }

  .pro-content-side {
    position: relative;
    z-index: 2;
    flex: none;
    padding: 96px 7vw 104px;
  }

  .pro-content-inner {
    max-width: 700px;
  }

  .pro-image-side {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
    height: 100%;
  }

  .pro-image-wrapper {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    max-height: none;
    clip-path: inset(0);
  }

  .pro-image-wrapper::after {
    background: linear-gradient(180deg, rgba(8, 17, 48, 0.72) 0%, rgba(8, 17, 48, 0.62) 100%);
  }

  /* position:fixed + clip-path birleşimi mobilde her kaydırma karesinde yeniden boyama
     yaptığı için görsel artık hero alanına sabitlenmiş (absolute) */
  .pro-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
  }

  .pro-badge {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.7;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.85);
  }

  .pro-title {
    margin-bottom: 1.75rem;
    font-size: clamp(2.5rem, 5.4vw, 3.3rem);
    line-height: 1.18;
    color: var(--color-white);
  }

  .pro-title .text-gradient {
    background: none;
    -webkit-text-fill-color: var(--color-accent);
    color: var(--color-accent);
  }

  .pro-desc {
    max-width: 40rem;
    margin-bottom: 2.5rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
  }

  .pro-actions {
    gap: 1rem;
  }

  .pro-actions .btn-primary-lux {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary) !important;
  }

  .pro-actions .btn-outline-lux {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--color-white) !important;
  }
}

/* ---------------------------------------------------------
   2. TABLET  (≤992px)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* ---- Alt sayfa hero ---- */
  .subpage-hero {
    padding: calc(100px + 7vh) 6vw 8vh;
  }

  .hero-title-row {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .mh-editorial {
    padding: 64px 6vw;
  }

  .ed-row,
  .ed-row.reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-bottom: 64px;
  }

  .ed-text p {
    max-width: none;
  }

  .ed-img-wrap {
    flex: none;
    aspect-ratio: 4 / 3;
  }

  .mh-categories {
    padding: 130px 6vw 72px;
  }

  .cat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 40px;
  }

  .mh-statement {
    padding: 10vh 0;
  }

  .mh-cta {
    padding: 0 4vw 6vw;
  }

  .cta-box {
    min-height: 56vh;
    border-radius: 16px;
  }

  /* ---- Hakkımızda ---- */
  .manifesto-section {
    padding: 64px 6vw;
  }

  .manifesto-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .manifesto-text h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .draw-frame {
    max-width: 420px;
    margin: 0 auto;
  }

  .draw-frame img.manifesto-img {
    height: 100%;
    object-position: center 30%;
  }

  .values-section {
    padding: 72px 6vw;
  }

  .values-title {
    margin-bottom: 40px;
  }

  .new-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ---- Sektörler (tablet + mobil): görsel üstte (kare), yazı altta ---- */
  .sectors-stack-container {
    padding: 48px 5vw 64px;
  }

  /* Tablet + mobil de masaüstü gibi katman katman üst üste biner (sticky).
     Görsel yatay kesit olduğu için kart ekrana sığar; sığmayan kart (çok kısa ekran)
     main.js tarafından .no-stick ile normal akışa alınır. */
  .sector-sticky-card {
    position: sticky;
    margin-bottom: 40px;
    max-width: 540px; /* tablette 1:1 görselli kart ekrana sığsın */
  }

  .sector-sticky-card.card-1 { top: 110px; }
  .sector-sticky-card.card-2 { top: 120px; }
  .sector-sticky-card.card-3 { top: 130px; }
  .sector-sticky-card.card-4 { top: 140px; }
  .sector-sticky-card.card-5 { top: 150px; }
  .sector-sticky-card.card-6 { top: 160px; }
  .sector-sticky-card.card-7 { top: 170px; }
  .sector-sticky-card.card-8 { top: 180px; }

  .sector-sticky-card.no-stick {
    position: static;
  }

  .sector-card-inner {
    flex-direction: column;
  }

  .sector-image {
    order: -1;
    width: 100%;
    flex: none;
    aspect-ratio: 1 / 1;
  }

  .sector-content {
    width: 100%;
    flex: none;
    padding: 32px 32px 36px;
  }

  .sector-num {
    margin-bottom: 1rem;
  }

  .sector-content p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* ---- Ürünler: görsel grubu üstte, yazı kartı altta (kart görselin alt kısmını örter) ---- */
  .premium-product-section {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 0;
    margin-bottom: 36px;
  }

  .dalton-group,
  .dalton-group.left-align,
  .dalton-group.right-align {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    flex-direction: row;
    --tuck: 10vw;
    --tuck-3: 3vw;
    --tuck-a: var(--tuck);
    --tuck-b: var(--tuck-3);
    align-self: center;
    height: min(calc((120vw + var(--tuck) + var(--tuck-3)) / var(--wm, 1.2)), 460px);
    z-index: 1;
  }

  /* mobilde sıra her zaman soldan sağa (büyük solda) */
  .dalton-item,
  .dalton-item.dalton-2,
  .dalton-item.dalton-3 {
    height: calc(var(--k) * 100%);
  }

  .dalton-group.left-align .dalton-item.dalton-2,
  .dalton-group.left-align .dalton-item.dalton-3,
  .dalton-group.right-align .dalton-item.dalton-2 {
    margin-left: calc(-1 * var(--tuck));
    margin-right: 0;
  }

  .dalton-group.left-align .dalton-item.dalton-3,
  .dalton-group.right-align .dalton-item.dalton-3 {
    margin-left: calc(-1 * var(--tuck-3));
    margin-right: 0;
  }

  .dalton-group.right-align .dalton-item + .dalton-item {
    margin-right: 0;
    margin-left: calc(-1 * var(--tuck));
  }

  .dalton-group.right-align .dalton-item.dalton-3 {
    margin-right: 0;
    margin-left: calc(-1 * var(--tuck-3));
  }

  .product-wrapper,
  .product-wrapper.left-align,
  .product-wrapper.right-align {
    justify-content: center;
    margin: -56px 0 0;
    padding: 0 5vw;
  }

  .product-info-card {
    width: 100%;
    max-width: 620px;
    min-height: 0;
    padding: 2.25rem 2rem;
  }

  .card-header {
    margin-bottom: 1.25rem;
  }

  .product-info-card p {
    margin-bottom: 1.5rem;
  }

  /* ---- Ürün detay ---- */
  .product-detail-section {
    min-height: 0;
    padding: 8vh 0;
  }

  .detail-info-card {
    max-width: 100%;
    min-width: 0;
    padding: 3rem 2.5rem;
  }

  .detail-bg-img {
    width: 40vw;
    opacity: 0.5;
  }

  /* ---- Kategori detay: tablet/mobil = eşit kareli grid ---- */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .gallery-item-card {
    flex: none;
  }

  /* ---- İletişim ---- */
  .contact {
    grid-template-columns: 1fr;
  }

  .contact-info {
    border-right: 0;
    border-bottom: 1px solid rgba(10, 46, 92, 0.1);
  }

  /* ---- Kalite ---- */
  .quality-matrix {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   2b. KÜÇÜK TABLET / BÜYÜK TELEFON  (≤767.98px)
   --------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* ---- Hero (ana sayfa) ---- */
  .pro-content-side {
    padding: 64px 7vw 80px;
  }

  .pro-badge {
    max-width: 19rem;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
  }

  .pro-title {
    font-size: clamp(2.3rem, 9.5vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: 1.75rem;
  }

  .pro-desc {
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .pro-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .pro-actions a {
    width: 100%;
    max-width: 320px;
    padding: 16px 24px;
  }


  /* Footer: 2'li kolonlar, ortalı */
  .site-footer {
    padding-top: 56px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding-bottom: 40px;
  }

  .footer-about p {
    margin-inline: auto;
  }

  .site-footer,
  .footer-col,
  .footer-about {
    text-align: center;
  }

  .footer-about .footer-logo img {
    margin-inline: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col ul {
    align-items: center;
  }

  .footer-contact ul li {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    word-break: break-word;
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
  }
}

/* ---------------------------------------------------------
   3. MOBİL  (≤576px) — sığan içerikler yan yana (2'li)
   --------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root {
    --container-padding: 0 16px;
  }

  /* ---- Header ---- */
  .mobile-nav a {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
  }

  /* ---- Butonlar ---- */
  .btn,
  .btn-primary-lux,
  .btn-outline-lux,
  .btn-outline-light,
  .btn-detail-cta,
  button[type="submit"] {
    padding: 13px 22px;
    font-size: 0.78rem;
    min-height: 46px;
  }

  .btn-detail-cta {
    width: 100%;
  }

  /* ---- Alt sayfa hero ---- */
  .subpage-hero {
    padding: calc(100px + 5vh) 6vw 6vh;
  }

  .subpage-hero::after {
    height: 36px;
    bottom: -18px;
  }

  .hero-nav-link,
  .hero-nav-sep {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  #scrollToTop {
    right: 16px;
    bottom: 20px;
    width: 42px;
    height: 42px;
  }

  /* ---- Ana sayfa ---- */
  .marquee-lux {
    padding: 1.25rem 0;
  }

  .marquee-content {
    animation-duration: 9s;
  }

  .marquee-content span {
    padding: 0 1.5rem;
    font-size: 0.85rem;
  }

  .mh-editorial {
    padding: 48px 6vw;
  }

  .ed-row,
  .ed-row.reverse {
    gap: 24px;
    margin-bottom: 48px;
  }

  .ed-img-overlay {
    left: 10px;
    bottom: 10px;
    padding: 8px 14px;
    font-size: 0.7rem;
  }

  .mh-categories {
    padding: 112px 5vw 56px;
  }

  .ch-text p,
  .cta-content p {
    font-size: 1.05rem;
  }

  /* Kategori kartları 2'li */
  .cat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cat-card {
    padding: 1.25rem 1rem 1rem;
    border-radius: 12px;
  }

  .cc-head {
    gap: 0.3rem;
    margin-bottom: 0.75rem;
  }

  .cc-head h3 {
    font-size: 1rem;
  }

  .cc-img-wrap {
    height: 130px;
  }

  .cta-box {
    min-height: 0;
  }

  .cta-content {
    padding: 3.5rem 1.5rem;
  }

  .cta-content p {
    margin-bottom: 2rem;
  }

  /* ---- Hakkımızda ---- */
  .manifesto-section {
    padding: 48px 6vw;
  }

  .manifesto-text p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .manifesto-stats {
    gap: 1.75rem;
    flex-wrap: wrap;
  }

  .manifesto-stat-item strong {
    font-size: 2.25rem;
  }

  .draw-frame {
    max-width: 320px;
  }

  .values-section {
    padding: 56px 5vw;
  }

  .new-values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .value-box {
    padding: 22px 16px;
  }

  .value-box h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .value-box p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* ---- Sektörler (mobil): görsel üstte, yazı altta (dikey kart) ---- */
  .sectors-stack-container {
    padding: 24px 4vw 48px;
  }

  .sector-sticky-card {
    margin-bottom: 36px;
  }

  /* Telefonda yığın başlangıcı ve basamaklar küçültüldü: 1:1 görselli kartlar da ekrana sığsın */
  .sector-sticky-card.card-1 { top: 106px; }
  .sector-sticky-card.card-2 { top: 111px; }
  .sector-sticky-card.card-3 { top: 116px; }
  .sector-sticky-card.card-4 { top: 121px; }
  .sector-sticky-card.card-5 { top: 126px; }
  .sector-sticky-card.card-6 { top: 131px; }
  .sector-sticky-card.card-7 { top: 136px; }
  .sector-sticky-card.card-8 { top: 141px; }

  .sector-card-inner {
    border-radius: 16px;
  }

  .sector-content {
    padding: 16px 18px 18px;
  }

  .sector-num {
    margin-bottom: 0.75rem;
    padding: 6px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .sector-content h2 {
    margin-bottom: 0.5rem;
    font-size: 1.45rem;
    line-height: 1.2;
  }

  .sector-content p {
    margin-bottom: 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .sector-tags {
    gap: 6px;
  }

  .sector-tags a,
  .sector-tags span {
    padding: 7px 11px;
    font-size: 0.78rem;
  }

  /* ---- Ürünler ---- */
  .product-wrapper,
  .product-wrapper.left-align,
  .product-wrapper.right-align {
    padding: 0 4vw;
    margin-top: -40px;
  }

  .product-info-card {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 20px;
  }

  .card-icon {
    width: 40px;
    height: 40px;
  }

  .product-info-card h2 {
    margin-bottom: 0.75rem;
    font-size: 1.6rem;
  }

  .product-info-card p {
    margin-bottom: 1.1rem;
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .product-features li {
    font-size: 1.02rem;
    border-bottom: 1px solid rgba(10, 46, 92, 0.08);
  }

  .product-features a {
    padding: 0.65rem 0;
  }

  /* ---- Ürün detay ---- */
  .product-detail-section {
    padding: 5vh 0;
  }

  .product-wrapper.center-align {
    padding: 0 4vw;
    margin-top: 0;
  }

  .detail-info-card {
    padding: 2.25rem 1.5rem;
    border-radius: 18px;
  }

  .detail-title {
    margin-bottom: 1.5rem;
  }

  .detail-article-text .lead-desc {
    margin-bottom: 1.5rem;
  }

  .detail-article-text h3 {
    margin-top: 2rem;
  }

  .cta-wrapper {
    margin-top: 2.25rem;
  }

  .detail-bg-img {
    width: 55vw;
    opacity: 0.15;
  }

  /* ---- Kategori detay ---- */
  .pure-seo-hero {
    padding: calc(100px + 5vh) 0 6vh;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .gallery-item-title {
    padding: 0.75rem 0.8rem 0.9rem;
    font-size: 0.85rem;
  }

  .pure-seo-gallery,
  .pure-seo-article {
    padding: 48px 0;
  }

  .pure-seo-cta {
    padding: 2rem 1.25rem;
  }

  /* ---- İletişim ---- */
  .contact-info,
  .contact-form-panel {
    padding: 2.5rem 1.5rem;
  }

  .contact-item dd {
    font-size: 1.1rem;
    word-break: break-word;
  }

  .contact-map {
    height: 260px;
  }

  .contact-submit {
    align-self: stretch;
  }

  /* ---- Kalite ---- */
  .quality-matrix {
    padding: 1rem;
  }

  .quality-card {
    padding: 1.75rem 1.5rem;
  }

  .quality-certs {
    padding: 1.75rem 1rem;
  }

  .quality-certs-title {
    margin-bottom: 1.75rem;
  }

  .cert-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .cert-item h3 {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1.05rem;
  }

  .cert-item p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------
   4. DOKUNMATİK CİHAZLAR — hover'a bağlı hareketleri kapat
   --------------------------------------------------------- */
@media (hover: none) {
  .cat-card:hover,
  .value-box:hover,
  .gallery-item-card:hover {
    transform: none;
  }

  .cat-card:hover .cc-img {
    transform: none;
  }
}