/* ═══════════════════════════════════════════════
   Dentacare — Mobile Responsive
   Breakpoints: 768px (tablet), 480px (mobil)
═══════════════════════════════════════════════ */

/* ── 768px ─────────────────────────────────── */
@media (max-width: 768px) {

  /* GENEL */
  html, body { overflow-x: hidden; }

  /* HEADER — frosted topbar */
  .header {
    padding: 18px 20px;
    background: rgba(242, 237, 230, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(26,26,24,.06);
  }
  .logo-name { font-size: 17px; }
  .logo-sub { font-size: 7px; letter-spacing: 3px; }
  .logo-mark { width: 24px; height: 24px; }

  /* DRAWER — tam ekran, scroll edilebilir */
  .drawer {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-nav {
    margin-top: 72px;
    padding: 0 24px;
    flex: 1;
  }
  .drawer-nav a {
    font-size: clamp(26px, 8vw, 38px);
    padding: 14px 0;
  }
  .drawer-bottom {
    padding: 24px;
    border-top: 1px solid rgba(26,26,24,.08);
    gap: 16px;
    flex-shrink: 0;
  }
  .drawer-bottom-row { flex-direction: row; gap: 24px; flex-wrap: wrap; }
  .drawer-cta { width: 100%; text-align: center; }

  /* SCROLL INDICATOR */
  .scroll-indicator { right: 10px; }

  /* Light class mobilde etkisiz — logo ve hamburger siyah kalır */
  .header.light .logo-name { color: #1a1a18; }
  .header.light .logo-sub { color: #6a6058; }
  .header.light .logo-mark path { stroke: #1a1a18; }
  .header.light .hamburger span { background: #1a1a18; }
  .scroll-track { height: 80px; }
  .section-name { height: 60px; font-size: 7px; }

  /* ── HERO ── */
  .section#hero {
    padding: 0;
    scroll-snap-align: start;
    justify-content: center;
  }
  .hero-content {
    padding-top: 80px; /* topbar için */
    padding-bottom: 80px; /* scroll hint için */
  }
  .eyebrow { font-size: 8px; letter-spacing: 3px; margin-bottom: 12px; }
  .headline { font-size: clamp(32px, 9vw, 52px); line-height: 1.05; letter-spacing: -0.5px; }
  .tagline { font-size: 13px; max-width: 88vw; line-height: 1.9; }
  .service-tags { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .service-tag { font-size: 8px; padding: 7px 14px; }
  .service-tag:not(:last-child)::after { display: none; }
  .hero-cta { padding: 14px 28px; font-size: 9px; margin-top: 20px; }
  .bottom-info, .bottom-right { display: none; }
  #smileCanvas { max-width: 88vw; height: auto; }
  .scroll-hint { bottom: 24px; }

  /* Ana sayfa — snap aktif, her section tam ekran */
  html, body {
    scroll-snap-type: y mandatory !important;
    height: 100% !important;
    overflow-y: scroll !important;
    scrollbar-width: none !important;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }
  .section {
    height: 100svh !important;
    min-height: 100svh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  /* ── HİZMETLER ── */
  #services { height: 100svh !important; min-height: auto; padding: 0; display: flex; align-items: center; justify-content: center; padding-top: 80px; }
  .services-shell {
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    gap: 16px;
    padding: 0;
    align-items: center;
  }
  .services-copy {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 5vw;
    gap: 0;
  }
  .services-kicker { font-size: 7px; letter-spacing: 4px; margin-bottom: 8px; }
  .services-title { font-size: clamp(24px, 6.5vw, 36px); line-height: 1.05; text-align: center; letter-spacing: -.5px; }
  .services-desc { margin: 6px auto 0; text-align: center; max-width: 88vw; font-size: 12px; line-height: 1.7; }
  .experience-actions { justify-content: center; flex-wrap: wrap; max-width: 88vw; margin: 10px auto 0; gap: 6px; }
  .filter-chip { font-size: 7px; padding: 5px 10px; letter-spacing: 2px; }
  .mouth-stage { width: 72vw; max-width: 320px; margin: 0 auto; aspect-ratio: 1/1; }

  /* Service card — mobilde altta küçük panel */
  .service-card {
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(12px) scale(.97) !important;
    z-index: 200;
    border-radius: 10px;
    padding: 14px 16px !important;
  }
  .service-card.visible {
    transform: translateY(0) scale(1) !important;
    pointer-events: all;
  }
  .service-card h3 { font-size: 18px; margin-bottom: 4px; }
  .service-card p { font-size: 11px; line-height: 1.65; }
  .tooth-note { display: none; }

  /* ── DOKTORLAR ── */
  /* ── DOKTORLAR ── */
  #doctors { height: auto !important; min-height: auto; overflow: hidden; padding-top: 72px; }

  .stage {
    flex-direction: column;
    min-height: auto;
    height: auto;
    position: relative;
  }

  /* Portrait swipe container */
  .portrait-col {
    width: 100%;
    height: 64vw;
    min-height: 280px;
    max-height: 420px;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
  }
  .portrait-item {
    flex: 0 0 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .portrait-item.active { opacity: 1; z-index: 1; }
  .portrait-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  /* İçerik alanı kompakt */
  .content-col { padding: 16px 5vw 20px; position: relative; }
  .skull-art { display: none; }
  .doc-kicker { font-size: 7px; letter-spacing: 3px; margin-bottom: 4px; }
  .doc-name { font-size: clamp(26px, 6.5vw, 38px); margin-bottom: 2px; line-height: 1.1; }
  .doc-title { font-size: 9px; letter-spacing: 2px; margin-bottom: 0; }
  .doc-divider { margin: 10px 0; }
  .doc-quote { padding-left: 18px; margin-bottom: 12px; }
  .doc-quote p { font-size: 14px; line-height: 1.55; }

  /* Uzmanlıklar — yatay chip'ler */
  .spec-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    margin-bottom: 14px;
  }
  .spec-item {
    border: 1px solid rgba(26,26,24,.14);
    border-right: 1px solid rgba(26,26,24,.14) !important;
    border-bottom: 1px solid rgba(26,26,24,.14) !important;
    padding: 6px 10px;
    border-radius: 4px;
    flex: 0 0 auto;
  }
  .spec-num { display: none; }
  .spec-label { font-size: 7.5px; letter-spacing: 1.5px; display: block; }
  .spec-desc { display: none; }

  /* Alt buton */
  .bottom-row { flex-direction: row; gap: 12px; align-items: center; justify-content: space-between; }
  .cta-btn { flex: 1; text-align: center; padding: 12px 16px; }
  .nav-arrows { display: none; }

  /* Thumb strip ve counter gizle */
  .thumb-strip { display: none; }
  .counter { display: none !important; }

  /* Swipe dot indicator */
  .doc-swipe-dots { display: none !important; }
  .doc-swipe-hint { display: none !important; }

































  .doc-swipe-hint svg { width: 14px; height: 14px; opacity: .5; }

  /* ── GALERİ (anasayfa) ── */
  #gallery { height: 100svh !important; }
  .gallery-stage {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    height: 100%;
    align-items: stretch;
    grid-template-rows: auto 1fr;
  }

  /* Üst yazı alanı */
  .gallery-copy {
    text-align: center;
    align-items: center;
    padding: 100px 5vw 12px;
    gap: 4px;
  }
  .gallery-title { font-size: clamp(28px, 7vw, 42px); margin-bottom: 4px; line-height: 1; letter-spacing: -1px; }
  .gallery-desc { font-size: 12px; line-height: 1.6; margin-bottom: 12px; max-width: 88vw; }
  .gallery-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    font-size: 8px;
    letter-spacing: 3px;
    padding: 0 22px;
    border: 1px solid rgba(26,26,24,.35);
    color: #1a1a18;
    text-decoration: none;
    background: none;
  }
  .gallery-cta span { position: relative; z-index: 1; }

  /* Carousel grid */
  .gallery-grid {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 12px 5vw 16px;
    scroll-padding: 0 5vw;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }

  .gallery-main,
  .gallery-thumb {
    flex: 0 0 84vw;
    height: 100%;
    min-height: 300px;
    border-radius: 12px;
    scroll-snap-align: start;
    margin-right: 12px;
    padding: 0;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .gallery-placeholder { height: 100%; }



  /* ── BLOG ── */
  #blog { height: 100svh !important; display: flex; align-items: stretch; }
  .blog-section { padding: 0; width: 100%; display: flex; align-items: stretch; }
  .blog-wrap { opacity: 1 !important; transform: none !important; padding: 64px 0 0; display: flex; flex-direction: column; width: 100%; height: 100%; }
  .blog-wrap::before { display: none; }
  .blog-desktop { display: none !important; }

  .blog-mobile-carousel {
    display: flex !important;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 0;
    gap: 0;
    flex: 1;
    min-height: 0;
  }
  .blog-mobile-carousel::-webkit-scrollbar { display: none; }

  .blog-mobile-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 0 8vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    height: 100%;
  }
  .blog-mobile-img {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: rgba(26,26,24,.06);
  }
  .blog-mobile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .blog-mobile-img .media-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .blog-mobile-copy { flex-shrink: 0; }
  .blog-mobile-cat { font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: #8a8078; display: block; margin-bottom: 4px; }
  .blog-mobile-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(17px, 4.5vw, 22px); line-height: 1.25; color: #1a1a18; margin-bottom: 5px; }
  .blog-mobile-desc { font-size: 12px; color: #6a6058; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .blog-mobile-footer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 5vw;
    flex-shrink: 0;
  }


  /* ── İLETİŞİM ── */
  #contact {
    height: 100svh !important;
    padding: 64px 5vw 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Tüm contact animasyonları mobilde devre dışı */
  #contact .contact-footer,
  #contact .contact-map-card,
  #contact .contact-final-wrap,
  #contact .contact-side,
  #contact .contact-quick-links,
  .contact-footer { opacity: 1 !important; transform: none !important; }

  .contact-final-wrap { gap: 0; display: flex; flex-direction: column; height: 100%; }
  .contact-final-head { grid-template-columns: 1fr; gap: 4px; padding-bottom: 8px; }
  .contact-final-title { font-size: clamp(26px, 6.5vw, 38px); letter-spacing: -1.5px; line-height: .95; }
  .contact-final-title em { font-style: italic; }
  .contact-final-desc { font-size: 12px; line-height: 1.65; max-width: 100%; }
  .contact-final-desc span { display: block; margin-top: 4px; font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: #8a8078; }

  .contact-map-stage { grid-template-columns: 1fr; gap: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .contact-map-card { flex: 1; min-height: 0; height: auto !important; border-radius: 10px; order: 0; margin: 10px 0 0; }
  .contact-pin { width: 48px; height: 48px; top: 46%; }
  .contact-pin::before { width: 10px; height: 10px; }
  .contact-pin-label { padding: 6px 10px; top: calc(46% + 42px); }
  .contact-pin-label strong { font-size: 12px; }
  .contact-pin-label span { font-size: 7px; }
  .contact-map-note { font-size: 7px; bottom: 8px; left: 10px; }
  .contact-side { display: none !important; }

  .contact-quick-links {
    display: flex !important;
    flex-direction: row;
    border-top: 1px solid rgba(26,26,24,.08);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
  }
  .contact-quick-links a {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 7px;
    letter-spacing: 2px;
    border-right: 1px solid rgba(26,26,24,.08);
    opacity: 1;
  }
  .contact-quick-links a:last-child { border-right: none; }
  .contact-quick-links a span:last-child { display: none; }

  /* ── FOOTER ── */
  .contact-footer {
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 16px 5vw 18px;
    border-top: 1px solid rgba(26,26,24,.1);
    flex-shrink: 0;
  }
  .contact-footer-brand { display: none; }
  .contact-footer-manifesto { display: none; }
  .contact-footer-mobile-top { display: none; }

  /* Sosyal medya + imza */
  .contact-footer-mini {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .contact-footer-social {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
  }
  .contact-footer-social a {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6a6058;
    text-decoration: none;
  }
  .contact-footer-mini > span {
    font-size: 8px;
    letter-spacing: 2px;
    color: #8a8078;
    text-transform: uppercase;
  }
  .contact-footer-mini > span a { color: inherit; text-decoration: none; }
}


/* ── 480px ─────────────────────────────────── */
@media (max-width: 480px) {

  /* HERO */
  .headline { font-size: clamp(28px, 9vw, 40px); }

  /* HİZMETLER */
  .services-title { font-size: clamp(28px, 8vw, 40px); }
  .filter-chip { font-size: 7px; padding: 7px 10px; letter-spacing: 2px; }
  .mouth-stage { width: 96vw; }

  /* DOKTORLAR */
  .doc-name { font-size: clamp(28px, 8vw, 40px); }
  .portrait-col { height: 40vh; min-height: 220px; }
  .thumb-strip { height: 68px; }
  .thumb-item { height: 68px; min-width: 46px; }

  /* GALERİ */
  .gallery-title { font-size: clamp(24px, 6.5vw, 34px); }
  .gallery-main, .gallery-thumb { flex: 0 0 88vw; height: 50vw; }

  /* İLETİŞİM */
  .contact-final-title { font-size: clamp(28px, 8vw, 40px); }
  .contact-map-card { height: 56vw; min-height: 220px; }
  .contact-side { grid-template-columns: 1fr; }
  .contact-quick-links { grid-column: 1; }

  /* BLOG */
  .featured-title { font-size: clamp(28px, 8vw, 40px); }
  .featured-media-wrap { display: none; }
  .small-media { height: 54vw; }
}

/* ── Lightbox close butonu ── */
@media (max-width: 768px) {
  .gallery-lightbox-close {
    width: 32px; height: 32px;
    top: 14px; right: 14px;
  }
  .gallery-lightbox-close svg {
    width: 12px; height: 12px;
  }
  .gallery-lightbox-inner {
    width: min(340px, 88vw);
  }
}

/* ── HOVER → TOUCH ──────────────────────────
   Dokunmatik cihazlarda hover state'leri
   yerine tap/active kullan
─────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Hotspot */
  .hotspot { cursor: pointer; }
  .hotspot:hover { fill: transparent; filter: none; transform: none; }
  .hotspot.touch-active {
    fill: rgba(255,255,255,0.22);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 34px rgba(225,178,136,0.62));
    transform: scale(1.045);
  }
  .hotspot.warning.touch-active {
    fill: rgba(95,50,32,0.16);
    filter: drop-shadow(0 0 18px rgba(120,70,42,.58)) drop-shadow(0 0 36px rgba(255,210,160,.45));
  }

  /* Mouth cursor gizle */
  .mouth-cursor { display: none !important; }

  /* Galeri tap */
  .gallery-main:active, .gallery-thumb:active { opacity: 0.88; }

  /* CTA butonları */
  .hero-cta:hover::before, .drawer-cta:hover::before,
  .cta-btn:hover::before, .gallery-cta:hover::before { height: 0; }
  .hero-cta:active::before, .drawer-cta:active::before,
  .cta-btn:active::before, .gallery-cta:active::before { height: 100%; }

  /* Thumb strip hover sıfırla */
  .thumb-item:hover:not(.active) img { filter: none; transform: none; }

  /* Drawer nav hover sıfırla */
  .drawer-nav a:hover { opacity: 1; transform: none; }
  .drawer-nav a:active { opacity: 0.6; }

  /* Quick links hover sıfırla */
  .contact-quick-links a:hover { opacity: 1; padding-left: 0; }
  .contact-quick-links a:active { opacity: 0.6; }

  /* Scroll indicator her zaman hafif görünür */
  .scroll-indicator { opacity: 0.35; }

  /* Blog hover sıfırla */
  .featured-post:hover .featured-media { transform: none; box-shadow: none; }
  .small-post:hover .small-media { transform: none; }

  /* Galeri page hover */
  .gp-item:hover img { transform: none; filter: grayscale(0.2) sepia(0.15) saturate(0.85) brightness(0.97); }
  .gp-item:hover .gp-item-overlay { opacity: 0; }
  .gp-item:active .gp-item-overlay { opacity: 1; }
  .gp-item:active img { transform: scale(0.98); }
}