/* ==========================================================================
   MedyaDes · kabuk.css
   Sitenin ortak tasarım dili: renkler, yazı ölçeği, kapsayıcılar, üst menü,
   mobil menü, düğmeler, altbilgi ve pencere temeli.
   Paketler sayfasının tasarımından çıkarıldı, bütün sayfalarda kullanılır.
   ========================================================================== */

:root{
  --hero-image:image-set(url('/assets/img/paketler-hero.webp') type('image/webp'));
  /* Ana sayfanın tasarım dili: mavi aksan, Sora başlık, Manrope gövde */
  --ink:#13212d;
  --ink2:#223444;
  --teal:#1557ff;
  --deep:#0b3fae;
  --mint:#dbe7ff;
  --muted:#6c7c89;
  --paper:#f7f8fb;
  --cizgi:rgba(19,33,45,.12);
  --line:rgba(19,33,45,.1);
  --line-2:rgba(19,33,45,.16);
  --cyan:#17c4d1;
  --shadow:0 22px 70px rgba(16,30,42,.08);
  --shadow-lg:0 28px 90px rgba(16,30,42,.12);
  --serif:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --govde:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Temel ---------- */
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:95px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 78% 44%,#dce9ff2e,transparent 45%),var(--paper);font-family:var(--govde);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #1557ff;outline-offset:5px}
[hidden]{display:none!important}
::selection{background:#cddcff}
img,svg,video{display:block;max-width:100%}

/* ---------- Kapsayıcılar ---------- */
.shell{width:calc(100% - 96px);max-width:1520px;margin-inline:auto}
.wide{width:calc(100% - 72px);max-width:1600px;margin-inline:auto}
@media(min-width:1780px){.shell{max-width:1640px}.wide{max-width:1720px}}

.skip{position:fixed;top:-100px;left:20px;background:var(--deep);color:#fff;padding:15px;z-index:120;border-radius:8px}
.skip:focus{top:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.top-progress{position:fixed;z-index:100;left:0;top:0;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left}

/* ---------- Üst menü: ana sayfayla aynı, sabit ve şeffaf ---------- */
.container{width:min(1320px,calc(100% - 54px));margin-inline:auto;position:relative;z-index:2}
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:.35s ease}
.site-header.scrolled{background:rgba(247,248,251,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(19,33,45,.08)}
.nav{height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.nav-side{display:flex;align-items:center;gap:38px}
.nav-side.right{justify-content:flex-end}
.nav-link{font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);position:relative;white-space:nowrap}
.nav-link::after{content:'';position:absolute;left:0;bottom:-10px;width:100%;height:1px;background:linear-gradient(90deg,var(--teal),var(--cyan));transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.nav-link:hover::after,.nav-link[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-link[aria-current]{color:var(--deep)}
.brand{width:320px;display:grid;place-items:center;justify-self:center}
.brand img{width:100%;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.05))}
/* Üst menüdeki çağrı düğmesi: hero'nun turkuaz paletiyle aynı geçiş */
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:99px;border:1px solid #00d1dc;background:linear-gradient(150deg,#00d4d8 0%,#009bae 50%,#005a98 100%);color:#fff;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 8px 22px #009ebd35,inset 0 1px 2px #98ffff;transition:transform .25s,box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px #009ebd55}
.nav-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.nav-link::after{background:linear-gradient(90deg,#00c7d6,#006da2)}
.nav-space{height:114px}
/* Parmakla rahat basılabilmesi için en az 44x44 dokunma alanı */
.mobile-menu{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--ink);width:44px;height:44px;padding:0;place-items:center}

/* ---------- Mobil menü paneli ---------- */
.mobile-panel{position:fixed;inset:92px 16px auto 16px;z-index:1100;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(19,33,45,.08);border-radius:24px;padding:16px;display:grid;gap:2px;box-shadow:0 24px 60px rgba(16,30,42,.12);max-height:calc(100dvh - 120px);overflow:auto}
.mobile-panel a{padding:13px 10px;border-bottom:1px solid rgba(19,33,45,.08);font-weight:800;font-size:15px;color:var(--ink)}
.mobile-panel a:last-child{border-bottom:0}
.mobile-panel a[aria-current]{color:var(--deep)}

/* ---------- Yazı ölçeği ---------- */
h1,h2,h3,h4,p{margin:0}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.07em;line-height:1.7;margin:0 0 12px;color:var(--muted)}
h1{font-family:var(--serif);font-size:clamp(42px,4.25vw,65px);line-height:1.01;letter-spacing:-2.6px;font-weight:700}
h1 em{display:inline-block;color:var(--teal);font-weight:500;font-size:.87em;white-space:nowrap;letter-spacing:-2.7px;margin-top:7px;line-height:1.13}

/* ---------- Düğmeler ---------- */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:linear-gradient(135deg,#1557ff,#0b3fae);border:1px solid #7ea6ff;border-radius:35px;padding:15px 23px;color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 20px #1557ff14;transition:transform .25s,box-shadow .25s}
.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px #1557ff26}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid #8aa6e8;border-radius:35px;background:#fff9;color:var(--deep);font-size:12px;font-weight:600;padding:15px 22px;transition:background .2s,box-shadow .2s}
.ghost:hover{background:#eaf1ff;box-shadow:0 5px 15px #1557ff12}
.text-button{display:inline-flex;gap:17px;align-items:center;background:none;border:0;padding:10px 0;font-size:11px;color:var(--deep)}

/* ---------- Bölüm başlığı ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.section-head .eyebrow{margin-bottom:5px;font-size:10px}
.section-head h2{font-family:var(--serif);font-size:36px;letter-spacing:-1.4px;line-height:1.15;font-weight:700}
.section-head h2 em{color:var(--teal);font-weight:500}
.section-head>div>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.55;margin-top:8px}
.tax-note{font-size:10px;color:var(--muted);white-space:nowrap;align-self:center}

/* ---------- Sık sorulan sorular ---------- */
.faq-section{padding-top:52px;scroll-margin-top:100px}
/* Geniş ekranda başlık solda kalır, sorular sağ sütunda okunur genişlikte durur */
@media(min-width:1024px){
  .faq-section{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:54px;align-items:start}
  .faq-section>.section-head{display:block;margin-bottom:0;position:sticky;top:100px}
  .faq-section>.section-head h2{font-size:33px}
}
.faq-list{display:grid;gap:11px}
.qa{background:linear-gradient(120deg,#fff,#fff 55%,#fafbff);border:1px solid #e6ebf2;border-radius:11px;box-shadow:0 12px 32px #101e2a0d;overflow:hidden}
.qa[open]{border-color:#a9c4ff}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:21px 25px;font-size:15px;font-weight:600;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:inherit;font-weight:inherit;line-height:inherit}
.qa summary:hover{color:var(--deep)}
.qa-x{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid #c3d5ff;background:#f2f6ff}
.qa-x:before,.qa-x:after{content:'';position:absolute;inset:50% 7px auto;height:1.5px;background:var(--deep);transform:translateY(-50%)}
.qa-x:after{transform:translateY(-50%) rotate(90deg);transition:transform .2s}
.qa[open] .qa-x:after{transform:translateY(-50%) rotate(0)}
.qa-a{padding:0 25px 22px;font-size:13px;line-height:1.85;color:var(--muted);max-width:74ch}
.qa-a p+p{margin-top:12px}

/* ---------- Rehber kartları ---------- */
.guides-section{padding-top:52px}
.guides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guide-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:linear-gradient(120deg,#fff,#fff 55%,#fafbff);border:1px solid #e6ebf2;border-radius:11px;padding:24px 26px 22px;box-shadow:0 12px 32px #174d450d;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.guide-card:hover{transform:translateY(-5px);box-shadow:0 23px 44px #176b5f1b;border-color:#b3e2d7}
.guide-meta{display:flex;flex-wrap:wrap;gap:9px 14px;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.guide-card strong{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.22;letter-spacing:-.6px}
.guide-card p{font-size:12px;line-height:1.6;color:var(--muted)}
.guide-go{margin-top:auto;padding-top:14px;font-size:11px;font-weight:600;color:var(--deep)}

/* ---------- Altbilgi: ana sayfayla aynı beyaz mega altbilgi ---------- */
.footer{padding:0;background:#fff;border-top:1px solid rgba(19,33,45,.08)}
.mega-footer{padding:62px 0 calc(20px + env(safe-area-inset-bottom,0px))}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:44px;align-items:start}
.footer-company .footer-brand{display:block;width:250px;margin-bottom:18px}
.footer-company .footer-brand img{width:100%;height:auto}
.footer-company>p{max-width:300px;margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.65}
.footer-company .contact-mini{display:grid;gap:8px;font-size:13px;font-weight:800;color:var(--ink2)}
.footer-company .contact-mini a:hover{color:var(--deep)}
.footer-company .address{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.55;max-width:320px;font-style:normal}
.footer-col h3{margin:0 0 16px;font:800 15px/1.2 var(--serif);letter-spacing:-.02em}
.footer-col nav{display:grid;gap:10px}
.footer-col a{font-size:13px;color:var(--muted);font-weight:700;transition:.2s ease}
.footer-col a:hover{color:var(--ink);transform:translateX(3px)}
.footer-base{margin-top:42px;padding:18px 0 0;border-top:1px solid rgba(19,33,45,.08);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:var(--muted)}
.footer-base .base-right{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.footer-base .linkish{border:0;background:none;padding:0;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-base .linkish:hover{color:var(--ink)}
@media(max-width:1100px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-company{grid-row:span 2}}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-company{grid-column:1/-1;grid-row:auto}
  .footer-base{align-items:flex-start;flex-direction:column}
  /* Telefonda bağlantılar 18px yüksekliğindeydi, parmakla basılabilir hale getirildi */
  .footer-col nav{gap:2px}
  .footer-col a{display:block;padding:10px 0;font-size:14px}
  .footer-company .contact-mini{gap:2px}
  .footer-company .contact-mini a{display:block;padding:9px 0}
  .footer-base .linkish{padding:10px 0}
}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Pencere temeli ---------- */
dialog{padding:30px;border:1px solid #dde3ec;border-radius:19px;max-width:650px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;background:#ffffff;color:var(--ink);box-shadow:0 25px 100px #101e2a2e}
dialog::backdrop{background:#0a121975;backdrop-filter:blur(7px)}
body.dialog-open{overflow:hidden}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.dialog-header .eyebrow{margin:0}
.close-dialog{border:1px solid #dde3ec;background:#f2f6ff;width:35px;height:35px;border-radius:50%;font-size:23px;line-height:1;flex-shrink:0}
dialog h2{font-family:var(--serif);font-size:35px;letter-spacing:-1px;line-height:1.15}
dialog h3{font-size:14px;margin:24px 0 8px}
dialog p{font-size:13px;line-height:1.85;color:#6c7c89}

/* Kapsayıcı genişleyince başlık ve kart içi de büyür, yüzeyler boş kalmaz */
@media(min-width:1500px){
  .section-head h2{font-size:39px}
  .section-head>div>p:not(.eyebrow){font-size:14px}
  .qa summary{font-size:16px;padding:23px 28px}
  .qa-a{font-size:14px;padding:0 28px 24px}
  .guides-grid{gap:24px}
  .guide-card{padding:27px 29px 24px}
  .guide-card strong{font-size:23px}
  .guide-card p{font-size:13px}
}

/* ---------- Sabit WhatsApp düğmesi ---------- */
.wa-float{position:fixed;z-index:90;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1557ff,#0b3fae);color:#fff;box-shadow:0 14px 30px -10px rgba(21,87,255,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
.wa-float.show{opacity:1;visibility:visible;transform:none}
.wa-float svg{width:26px;height:26px;fill:currentColor}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- KVKK penceresi ---------- */
.modal{position:relative;padding:0;max-width:680px}
.modal-in{padding:34px}
.modal-x{position:absolute;top:18px;right:18px;border:1px solid #dde3ec;background:#f2f6ff;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:var(--deep)}
.modal-x svg{width:14px;height:14px;fill:currentColor}
.modal h2{font-size:27px;letter-spacing:-.8px;padding-right:42px}
.modal h3{font-size:14px;margin:22px 0 7px;color:var(--ink)}
.modal p{font-size:13px;line-height:1.85;color:var(--muted);margin-top:9px}

/* ---------- Duyarlı ---------- */
@media(max-width:1200px){
  .shell{width:calc(100% - 72px)}
  .nav-side{gap:22px}
  .wide{width:calc(100% - 56px)}
  .section-head h2{font-size:32px}
  .section-head>div>p:not(.eyebrow){font-size:12px}
  .guides-grid{gap:16px}
  .guide-card{padding:21px 22px}
  .guide-card strong{font-size:19px}
}
@media(max-width:900px){
  .shell{width:calc(100% - 56px)}
  .wide{width:calc(100% - 40px)}
  .section-head h2{font-size:29px}
  .guides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa summary{font-size:14px;padding:18px 20px}
  .qa-a{padding:0 20px 19px}
}
@media(max-width:980px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav-side{display:none}
  .brand{width:250px}
  .mobile-menu{display:grid;justify-self:end;cursor:pointer}
  .nav::before{content:'';width:26px}
}
@media(max-width:640px){
  html{scroll-padding-top:84px}
  .shell{width:calc(100% - 36px)}
  .container{width:calc(100% - 32px)}
  .nav{height:66px}
  .brand{width:210px}
  .nav-space{height:88px}
  .mega-footer{padding-top:48px}
  .wide{width:calc(100% - 28px)}
  .section-head{display:block;margin-bottom:20px}
  .section-head .eyebrow{font-size:9px;margin-bottom:8px}
  .section-head h2{font-size:31px;line-height:1.13;letter-spacing:-1.2px}
  .section-head>div>p:not(.eyebrow){font-size:12px;line-height:1.7;margin-top:9px}
  .tax-note{display:block;font-size:10px;margin-top:10px}
  .faq-section,.guides-section{padding-top:38px}
  .guides-grid{grid-template-columns:1fr;gap:14px}
  .guide-card{padding:22px 23px 20px}
  .guide-card strong{font-size:21px}
  .guide-card p{font-size:13px;line-height:1.7}
  .qa summary{font-size:15px;padding:19px 21px;gap:14px}
  .qa-a{font-size:13px;padding:0 21px 20px}
  dialog{padding:23px;max-height:89dvh}
  dialog h2{font-size:30px}
  dialog p{font-size:12px}
  .dialog-header{gap:10px}
  .dialog-header .eyebrow{font-size:10px}
}
@media(max-width:360px){
  .container{width:calc(100% - 24px)}
  h1{font-size:42px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .primary:hover{transform:none}
}
@media print{
  .site-header,.nav-space,.mobile-menu,.mobile-panel,.top-progress,.footer-col,.wa-float,dialog{display:none!important}
  .shell,.wide{width:100%;max-width:none}
}

/* Altbilgideki yasal belge baglantilari */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding:22px 0 0;margin-top:26px;border-top:1px solid #e4ebf0}
.footer-legal a{font-size:12px;color:#5d7180;text-decoration:none}
.footer-legal a:hover{color:var(--teal);text-decoration:underline}