/* Alanya UCN Yapı | responsive.css
   -----------------------------------------------------------------------------
   Kirilma noktalari: 1200 / 1024 / 768 / 480
   768 ve altinda mobil icin ayri bir duzen kurulur; masaustu duzeninin
   kucultulmus hâli degildir.
   ========================================================================== */

@media (max-width:1200px){
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .foot-col:last-child{ grid-column:1 / -1; }
}

@media (max-width:1024px){
  .section{ padding:64px 0; }
  .head-inner{ gap:16px; min-height:78px; }   /* 1024: yatay bosluga dokunulmuyor */
  .main-nav a{ padding:8px 10px; font-size:.9rem; }

  .feature-row{ grid-template-columns:1fr; }
  .section-tight .feature-row{ margin-top:-40px; }
  .steps{ grid-template-columns:1fr 1fr; gap:28px 22px; }
  .step:not(:last-child)::after{ display:none; }
  .rt-grid{ grid-template-columns:1fr; gap:26px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:32px; }
  .contact-grid{ grid-template-columns:1fr; gap:30px; }
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:24px; padding:38px 34px; }
}

/* =========================================================================
   MOBIL  (768 ve alti)
   ========================================================================= */
@media (max-width:768px){

  body{ font-size:16px; line-height:1.7; }
  /* kenar bosluklari genisletildi: logo ve hamburger ekranin kenarina
     yapisik durmasin */
  .wrap{ padding:0 24px; }
  .section{ padding:56px 0; }
  .section-tight{ padding:34px 0; }
  h1{ font-size:1.92rem; line-height:1.24; }
  h2{ font-size:1.44rem; }
  h3{ font-size:1.1rem; }
  .lead{ font-size:1.04rem; }

  /* ------------------------------------------------------- UST BASLIK */
  .head-inner{
    display:grid; grid-template-columns:1fr auto auto;
    align-items:center; gap:12px;
    min-height:80px;
    /* yatay bosluk .wrap'ten gelir; kisaltma yazip ezmiyoruz */
    padding-top:13px; padding-bottom:13px;
  }
  .brand{ margin-right:0; min-width:0; }
  .brand-img img{ max-height:58px; max-width:220px; }
  .brand-name{ font-size:1.24rem; }
  .brand-sub{
    font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .lang-desktop{ display:none; }

  /* ---- DIL SECICI: baslikta, logo ile hamburger arasinda -----------------
     Ziyaretci hamburger menuyu acmadan dilini gorup secebilsin.
     Yer dar oldugu icin yalnizca bayrak; erisilebilir ad aria-label'da.
     Logo kare (600x600) oldugu icin genisligi ~58px, yer yetiyor. */
  .lang-mobile{
    display:flex; align-items:center;
    order:2;                       /* logo | diller | hamburger */
    flex:0 0 auto;
  }
  .lang-compact{ display:flex; align-items:center; gap:3px; }
  .lang-compact a{
    display:flex; align-items:center; justify-content:center;
    padding:5px; border-radius:5px;
    border:1px solid transparent; background:none;
    transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  }
  .lang-compact a .flag{
    width:22px; height:15px;
    opacity:.55;                   /* secili olmayan diller geride dursun */
    transition:opacity var(--t-fast), transform var(--t-fast);
  }
  .lang-compact a:active{ transform:scale(.92); }
  .lang-compact a:active .flag{ opacity:1; }
  .lang-compact a.on{
    background:var(--brand-soft); border-color:var(--brand);
  }
  .lang-compact a.on .flag{
    opacity:1;
    box-shadow:0 0 0 1px rgba(0,0,0,.14);
  }

  /* hamburger artik kenara yapisik degil: yuvarlak bir kutu icinde */
  .nav-btn{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; gap:5px; padding:0;
    border-radius:var(--r); background:var(--surface-2);
    border:1px solid var(--line);
    transition:background var(--t-fast), opacity var(--t-fast);
  }
  .nav-btn:active{ background:var(--brand-soft); }
  .nav-btn span{ width:19px; }
  .nav-btn.on{ opacity:0; pointer-events:none; }

  /* -------------------------------------------------------- CEKMECE */
  html.nav-lock{ overflow:hidden; }
  html.nav-lock body{ position:fixed; width:100%; overflow:hidden; }

  .nav-scrim[hidden]{ display:none !important; }
  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(12,26,30,.6);
    opacity:0; transition:opacity .25s ease;
  }
  .nav-scrim.on{ opacity:1; }

  .main-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:58;
    width:min(88vw, 350px);
    display:flex; flex-direction:column;
    background:var(--surface);
    box-shadow:-14px 0 48px rgba(0,0,0,.3);
    transform:translateX(103%);
    transition:transform .32s cubic-bezier(.32,.72,.3,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .main-nav.open{ transform:none; }

  /* cekmece basligi: renkli, markali */
  .nav-top{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 22px 20px;
    background:var(--grad-teal); color:#fff;
  }
  .nav-top::after{
    content:""; position:absolute; right:-40px; top:-50px;
    width:150px; height:150px; border-radius:50%;
    background:rgba(255,255,255,.08);
  }
  .nav-title{
    position:relative; z-index:1;
    font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700;
    color:var(--gold);
  }
  .nav-close{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin:-6px -6px -6px 0;
    background:rgba(255,255,255,.12); border:0; border-radius:50%;
    color:#fff; cursor:pointer;
    transition:background var(--t-fast);
  }
  .nav-close:active{ background:rgba(255,255,255,.24); }

  .main-nav ul{ flex:1 1 auto; flex-direction:column; gap:0; padding:8px 0; margin:0; }
  .main-nav li{ border-bottom:1px solid var(--line-soft); margin:0; }
  .main-nav li:last-child{ border-bottom:0; }
  .main-nav a{
    display:flex; align-items:center; gap:12px;
    padding:16px 22px; border-radius:0;
    font-size:1.02rem; font-weight:500; color:var(--ink);
  }
  .main-nav a::after{
    content:""; margin-left:auto; width:7px; height:7px;
    border-right:2px solid var(--line); border-top:2px solid var(--line);
    transform:rotate(45deg); position:static; background:none;
    transition:border-color var(--t-fast), transform var(--t-fast);
  }
  .main-nav a:active{ background:var(--surface-2); }
  .main-nav a.on{
    color:var(--brand); font-weight:600;
    background:linear-gradient(90deg, var(--brand-soft), transparent);
    box-shadow:inset 3px 0 0 var(--brand);
  }
  .main-nav a.on::after{ border-color:var(--brand); transform:rotate(45deg) translate(2px,-2px); }

  .nav-bottom{
    display:block; padding:20px 22px 26px;
    background:var(--surface-2); border-top:1px solid var(--line);
  }
  .nav-bottom .lang-switch{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:18px; }
  .nav-bottom .lang-switch a{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:10px 0; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--surface); font-size:.74rem;
  }
  .nav-bottom .lang-switch .flag{ width:26px; height:17px; }
  .nav-bottom .lang-switch a.on{ background:var(--grad-brand); border-color:transparent; color:#fff; }
  .nav-cta{ display:grid; gap:10px; }
  .nav-cta .btn,.nav-cta .btn-line{ padding:14px 18px; font-size:.96rem; }

  /* ------------------------------------------------------------ HERO */
  .hero-inner{ padding:56px 20px 54px; }
  .hero h1{ font-size:1.98rem; }
  .hero-sub{ font-size:1.04rem; }
  .hero-text{ font-size:.98rem; }
  .hero-actions{ display:grid; gap:10px; margin-top:28px; }
  .hero-actions .btn,.hero-actions .btn-line{ width:100%; padding:15px 20px; }

  /* -------------------------------------------------- BOLUM BASLIKLARI */
  .sec-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:26px; }
  .sec-head h2{ padding-left:15px; }
  .sec-more{
    padding:9px 18px; border-radius:var(--r-full);
    background:var(--brand-soft); font-size:.86rem;
  }
  .sec-head-center{ margin-bottom:28px; }

  /* --------------------------------------------------- OZELLIK KARTLARI */
  .section-tight .feature-row{ margin-top:-34px; }
  .feature-row{ gap:12px; }
  .feature{ padding:20px 18px; gap:14px; border-radius:var(--r); }
  .feature-ico{ width:44px; height:44px; }
  .feature h3{ font-size:1rem; }
  .feature p{ font-size:.92rem; }

  /* ------------------------------------------------- HIZMET KARTLARI */
  .card-grid{ grid-template-columns:1fr; gap:14px; }
  .card-link{ display:grid; grid-template-columns:auto 1fr; gap:0 16px; padding:20px; }
  .card-ico{ grid-row:1 / span 3; width:48px; height:48px; margin-bottom:0; }
  .card h3{ font-size:1.06rem; margin-bottom:.3em; }
  .card p{ font-size:.93rem; margin-bottom:10px; }
  .card::before{ transform:scaleX(1); opacity:.4; }

  /* ============================================ NASIL CALISIYORUZ
     Mobilde 4 kutu alt alta dagilmis duruyordu. Artik dikey bir zaman
     cizgisi: solda surekli bir hat, uzerinde numarali daireler. */
  .steps{
    position:relative; grid-template-columns:1fr; gap:16px;
    margin-top:20px; padding-left:44px;
  }
  .steps::before{
    content:""; position:absolute; left:17px; top:14px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--brand) 0%, var(--brand-lt) 50%, var(--line) 100%);
    border-radius:2px;
  }
  .step{
    padding:18px 20px; border-radius:var(--r);
    box-shadow:var(--sh-xs);
  }
  .step:not(:last-child)::after{ display:none; }
  .step-no{
    top:20px; left:-44px;
    width:36px; height:36px; font-size:.94rem;
    border:3px solid var(--sand-2);
  }
  .step-ico{ display:none; }
  .step h3{ font-size:1.04rem; margin-bottom:.3em; }
  .step p{ font-size:.93rem; }

  /* --------------------------------------------- REFERANS SEKMELERI */
  .rt-bar{
    gap:8px; margin-bottom:20px;
    padding:2px 20px 6px; margin-left:-20px; margin-right:-20px;
    -webkit-overflow-scrolling:touch;
  }
  .rt-tab{ padding:11px 18px; border-radius:var(--r-full); }
  .rt-t{ font-size:.88rem; }
  .rt-tab em{ font-size:.72rem; }
  .rt-grid{ gap:20px; }
  .rt-strip{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .rt-text h3{ font-size:1.2rem; }
  .rt-facts{ margin:18px 0 20px; }
  .rt-facts li{ padding:10px 14px; }

  /* ---------------------------------------------------------- SAYILAR */
  .stats{ padding:48px 0; }
  .stats-head{ font-size:1.3rem; margin-bottom:24px; }
  .stat-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-item{ padding:20px 12px; border-radius:var(--r); }
  .stat-item b{ font-size:1.85rem; }
  .stat-item span{ font-size:.82rem; line-height:1.45; }

  /* ---------------------------------------------------------- TANITIM */
  .split{ gap:22px; }
  .split-side{ padding:20px 20px 14px; border-radius:var(--r); }
  .check-list li{ padding:12px 0; font-size:.92rem; }

  /* ----------------------------------------------------------- GALERI */
  .thumb-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .thumb{ border-radius:var(--r-sm); }
  .thumb-cap{ opacity:1; transform:none; font-size:.78rem; padding:10px 12px; }
  .thumb::after{ opacity:1; }
  .filter{
    gap:7px; margin-bottom:22px; flex-wrap:nowrap;
    overflow-x:auto; padding:2px 20px 6px; margin-left:-20px; margin-right:-20px;
  }
  .filter a{ flex:0 0 auto; padding:9px 16px; font-size:.85rem; }

  /* -------------------------------------------------- BLOG / REFERANS */
  .post-grid,.ref-grid{ grid-template-columns:1fr; gap:16px; }
  .post-body,.ref-body{ padding:18px 20px 20px; }
  .post-body h3,.ref-body h3{ font-size:1.08rem; }
  .ref-facts{ grid-template-columns:1fr 1fr; }
  .ref-facts > div{ padding:14px 16px; }
  .ref-facts b{ font-size:.94rem; }
  .post-cover,.ref-cover{ border-radius:var(--r); margin-bottom:24px; }

  /* -------------------------------------------------------------- SSS */
  .faq{ margin-top:24px; }
  .faq-item{ border-radius:var(--r); margin-bottom:10px; }
  .faq-item summary{ padding:16px 18px; font-size:.98rem; gap:14px; }
  .faq-body{ padding:0 18px 18px; font-size:.94rem; }

  /* -------------------------------------------------------------- CTA */
  .cta{ padding-bottom:56px; }
  .cta-inner{ padding:30px 24px; border-radius:var(--r-lg); gap:20px; }
  .cta .btn{ width:100%; }
  .detail-cta{ padding:26px 22px; border-radius:var(--r-lg); }
  .detail-cta-btns{ display:grid; gap:10px; }
  .detail-cta-btns .btn,.detail-cta-btns .btn-line{ width:100%; }

  /* --------------------------------------------------------- ILETISIM */
  .contact-form{ padding:24px 20px; border-radius:var(--r); }
  .contact-info{ padding:24px 20px; border-radius:var(--r); }
  .row2{ grid-template-columns:1fr; gap:0; }
  .map-wrap{ margin-top:30px; border-radius:var(--r); }
  .map-wrap iframe{ height:300px; }
  .field input,.field select,.field textarea{ padding:14px 16px; font-size:1rem; }

  /* -------------------------------------------------------- ALT BILGI */
  .site-foot{ padding-top:48px; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; padding-bottom:34px; }
  .foot-text{ max-width:none; }
  .foot-col h3{ margin-bottom:14px; }
  .foot-col li{ margin-bottom:9px; }
  .foot-bottom-inner{ flex-direction:column; align-items:flex-start; gap:8px; }

  /* --------------------------------------------------- SABIT BUTONLAR */
  .fab-stack{ left:18px; bottom:18px; gap:11px; }
  .fab{ width:56px; height:56px; }
  .fab-social{ width:46px; height:46px; }
  .fab-label{ display:none; }
  .to-top{ right:18px; bottom:18px; width:48px; height:48px; }

  /* ----------------------------------------------------- CEREZ SERIDI */
  .cookie{ left:12px; right:12px; bottom:12px; border-radius:var(--r); }
  .cookie-in{ flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
  .cookie-btns{ display:grid; grid-template-columns:1fr 1fr; }

  /* ------------------------------------------------------------ DIGER */
  .crumb ol{ padding:12px 0; font-size:.8rem; }
  .pager a,.pager span{ min-width:38px; height:38px; font-size:.86rem; }
  .lb-prev,.lb-next{ width:42px; height:42px; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
  .lightbox img{ max-height:70vh; }
}

/* =========================================================================
   KUCUK TELEFON  (480 ve alti)
   ========================================================================= */
@media (max-width:480px){
  .wrap{ padding:0 20px; }
  .section{ padding:46px 0; }
  h1{ font-size:1.74rem; }
  h2{ font-size:1.32rem; }

  .head-inner{ min-height:72px; padding-top:11px; padding-bottom:11px; gap:8px; }
  .brand-img img{ max-height:50px; max-width:180px; }
  /* 320-380 px araliginda dil seridi biraz daralir */
  .lang-compact{ gap:2px; }
  .lang-compact a{ padding:4px; }
  .lang-compact a .flag{ width:20px; height:13px; }
  .brand-name{ font-size:1.14rem; }
  .brand-sub{ display:none; }
  .nav-btn{ width:44px; height:44px; }

  .hero-inner{ padding:46px 16px 46px; }
  .hero h1{ font-size:1.78rem; }

  .steps{ padding-left:40px; }
  .steps::before{ left:15px; }
  .step-no{ left:-40px; width:32px; height:32px; font-size:.86rem; }

  .stat-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat-item{ padding:16px 10px; }
  .stat-item b{ font-size:1.6rem; }

  .thumb-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .rt-strip{ grid-template-columns:repeat(3,1fr); }
  .ref-facts{ grid-template-columns:1fr; }
  .cookie-btns{ grid-template-columns:1fr; }
  .card-link{ padding:18px; gap:0 13px; }
  .card-ico{ width:44px; height:44px; }
  .fab{ width:54px; height:54px; }
  .to-top{ width:46px; height:46px; }
}

/* yazdirma */
@media print{
  .site-head,.site-foot,.fab-stack,.cookie,.nav-scrim,.lightbox,.crumb{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:16px 0; }
  a{ color:#000; text-decoration:underline; }
}

/* ---------------------------------- yeni bolumler: mobil uyarlamalari */
@media (max-width:1024px){
  .quick-strip > .wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .page-hero{ padding:38px 0 34px; }
  .page-hero h1{ max-width:none; }
  .eyebrow{ margin-bottom:11px; padding:5px 13px; font-size:.7rem; }

  .quick-strip{ margin-top:-20px; }
  .quick-strip > .wrap{ grid-template-columns:1fr; gap:10px; }
  .quick-card{ padding:15px 16px; gap:13px; border-radius:var(--r); }
  .quick-ico{ width:42px; height:42px; }

  .info-list li{ padding:14px 0; gap:12px; }
  .info-ico{ width:34px; height:34px; }
  .info-body a,.info-body span{ font-size:.95rem; }
  .fact-list li{ padding:12px 0; }
  .contact-intro{ margin-bottom:26px; }

  .read-time{ margin-left:10px; }
}