/* ============================================================
   ANGORANET · ortak temel (ürün sayfaları)
   Ana sayfanın dili: Nunito, krem + lacivert, tek vurgu kırmızı,
   basılınca çöken butonlar, büyük yaylar, sahnede Ango.
   Sıra: scrollcraft.css → nav.css → ango-temel.css → sayfanın kendi <style>'ı
   ============================================================ */
:root{
  --sc-canvas:#FFF7F2;
  --sc-surface:#FFFFFF;
  --sc-ink:#232A55;
  --sc-ink-soft:#565D7A;
  --sc-accent:#E0342C;
  --sc-accent-ink:#FFFFFF;
  --sc-font-display:"Nunito",system-ui,sans-serif;
  --sc-font-text:"Nunito",system-ui,sans-serif;

  --navy:#232A55;
  --navy-2:#2E3769;
  --navy-deep:#181D40;
  --text:#565D7A;
  --text-on-navy:#C8CCE6;
  --accent:#E0342C;
  --accent-dark:#B3221B;
  --accent-soft:#FDE7E3;
  --yesil:#2FB36B;
  --yesil-koyu:#23884F;
  --yesil-soft:#E3F6EA;
  --sari:#FFD84D;
  --krem:#FFF7F2;
  --kum:#F6F1EE;
  --cizgi:#EDE3DC;
  --f-sans:"Nunito",system-ui,sans-serif;

  --r-btn:16px;
  --yay:cubic-bezier(.34,1.56,.64,1);
  --wrap:1240px;
  --nav-alt:74px;
}

body{font-weight:600;color:var(--navy);background:var(--krem)}
h1,h2,h3{margin:0;font-family:var(--f-sans);color:inherit;text-wrap:balance}
p{margin:0}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
[hidden]:not([hidden="until-found"]){display:none!important}
main [id]{scroll-margin-top:96px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sc-gutter)}
.baslik{font-weight:900;font-size:clamp(2.1rem,1.35rem + 2.7vw,3.7rem);line-height:1.02;letter-spacing:-.028em}
.baslik em{font-style:normal;color:var(--accent)}
.ozet{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--text);max-width:44ch;text-wrap:pretty}
.ikon{width:1em;height:1em;flex:none}
.zemin-lacivert{background:var(--navy);color:#fff}
.zemin-lacivert .ozet{color:var(--text-on-navy)}
.metin-link{color:var(--accent-dark);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.zemin-lacivert .metin-link{color:#fff}
.metin-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---- butonlar: basılınca aşağı çöken (Duolingo) ---------------- */
.btn{
  --golge:var(--accent-dark);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;border:0;border-radius:var(--r-btn);
  font:800 17px/1 var(--f-sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  box-shadow:0 5px 0 var(--golge);
  transition:transform 110ms var(--sc-ease-out),box-shadow 110ms var(--sc-ease-out),background-color 140ms ease;
}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--golge)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.btn .ikon{font-size:19px}
.btn--kirmizi{background:var(--accent);color:#fff}
@media (hover:hover){.btn--kirmizi:hover{background:#EC4038}}
.btn--yesil{--golge:var(--yesil-koyu);background:var(--yesil);color:#fff}
@media (hover:hover){.btn--yesil:hover{background:#36C176}}
.btn--beyaz{--golge:#D7CFE0;background:#fff;color:var(--navy)}
.zemin-lacivert .btn--beyaz{--golge:#0E1233}
.btn--cizgi{--golge:var(--cizgi);background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--cizgi),0 5px 0 var(--golge)}
.btn--cizgi:active{box-shadow:inset 0 0 0 2px var(--cizgi),0 0 0 var(--golge)}
@media (hover:hover){.btn--cizgi:hover{background:#FFFBF8}}
.btn--hayalet{--golge:#0E1233;background:var(--navy-2);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 5px 0 var(--golge)}
.btn--hayalet:active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 0 0 var(--golge)}
@media (hover:hover){.btn--hayalet:hover{background:#39427A}}

/* ---- nav: ana sayfayla aynı dokunuşlar ------------------------- */
.nv-cta{border-radius:12px;font-weight:800;box-shadow:0 4px 0 var(--accent-dark);transition:transform 110ms var(--sc-ease-out),box-shadow 110ms var(--sc-ease-out),background-color 140ms ease}
.nv-cta:active{transform:translateY(4px);box-shadow:0 0 0 var(--accent-dark)}
.nv-link,.nv-giris{font-weight:700}
.nv-ikon{display:block}
.nv-link[aria-current="page"]{background:var(--accent-soft);color:var(--accent-dark)}
.nv-grup a[aria-current="page"]{background:var(--accent-soft)}

/* ---- sayfa yolu -------------------------------------------------- */
.yol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-weight:800;font-size:14px;color:var(--text)}
.yol li{display:inline-flex;align-items:center;gap:6px}
.yol li + li::before{content:"";width:6px;height:6px;border:solid #B9B3C4;border-width:2px 2px 0 0;rotate:45deg;margin-right:4px}
.yol a{color:var(--text);transition:color 140ms ease}
@media (hover:hover){.yol a:hover{color:var(--accent-dark)}}
.yol [aria-current]{color:var(--navy)}

/* ---- Ango konuşma balonu ---------------------------------------- */
.avatar{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;object-position:50% 20%;background:var(--accent-soft)}
.ango-not{display:flex;align-items:flex-start;gap:12px}
.ango-not p{padding:12px 16px 13px;border-radius:6px 18px 18px 18px;background:var(--accent-soft);font-size:15.5px;line-height:1.5;font-weight:700;color:var(--navy);text-wrap:pretty}
.ango-not b{color:var(--accent-dark);font-weight:900}

/* ================================================================
   SORULAR — Ango yanda sabit (ana sayfayla aynı)
   ================================================================ */
.sss{padding:clamp(90px,11vw,150px) 0 clamp(90px,11vw,160px)}
.sss-izgara{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.sss-yan{position:sticky;top:110px}
.sss-yan .ozet{margin-top:16px}
.sss-yan img{width:min(230px,70%);height:auto;margin:22px 0 18px -8px}
.faq{display:grid;gap:14px}
.faq details{background:#fff;border-radius:22px;box-shadow:0 0 0 2px var(--cizgi),0 5px 0 var(--cizgi)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:22px 24px;font-weight:800;font-size:18px;line-height:1.35;color:var(--navy);border-radius:22px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-left:auto;width:32px;height:32px;border-radius:10px;
  background:var(--accent-soft) center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23E0342C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform 200ms var(--sc-ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.faq details p{padding:0 24px 24px;font-size:16px;line-height:1.65;color:var(--text);max-width:62ch}
.faq details p a{color:var(--accent-dark);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ================================================================
   KAPANIŞ — lacivert yay iris gibi açılır
   ================================================================ */
.kapanis-yay{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(56px,7vw,96px) var(--sc-gutter) clamp(64px,8vw,110px);
  border-radius:clamp(36px,5vw,64px) clamp(36px,5vw,64px) 0 0;
}
.kapanis-yay img{width:clamp(190px,20vw,270px);height:auto;margin:0 auto 10px}
.kapanis-yay .baslik{color:#fff}
.kapanis-yay .ozet{color:var(--text-on-navy);margin:16px auto 0}
.kapanis-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}

/* ---- footer ------------------------------------------------------ */
.ftr{background:var(--navy);color:var(--text-on-navy);padding:8px 0 40px}
.ftr .wrap{padding-top:40px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1.7fr 1fr 1fr;gap:40px}
.ftr-grid > div:nth-child(2) ul{grid-template-columns:repeat(2,max-content);column-gap:36px}
.ftr-logo{height:28px;width:auto}
.ftr-about{margin-top:18px;font-size:15px;line-height:1.6;max-width:36ch}
.ftr-iletisim{margin-top:18px;font-style:normal;font-size:15px;line-height:1.6}
.ftr-iletisim a{display:inline-block;margin-top:6px;color:#fff;font-weight:800;font-size:17px}
@media (hover:hover){.ftr-iletisim a:hover{text-decoration:underline;text-underline-offset:3px}}
.ftr h4{margin:0 0 14px;font:800 15px/1 var(--f-sans);color:#fff}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{font-size:15px;color:var(--text-on-navy)}
@media (hover:hover){.ftr ul a:hover{color:#fff}}
.ftr-bot{display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;line-height:1.6}

@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes salin{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width:900px){
  :root{--nav-alt:66px}
  .sss-izgara{grid-template-columns:1fr}
  .sss-yan{position:static}
  .sss-yan img{width:150px;margin:16px 0 0}
  .sss-yan .btn{display:none}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-grid > :first-child{grid-column:1 / -1}
  .ftr-bot{flex-direction:column}
}
@media (max-width:560px){
  .kapanis-cta .btn{width:100%}
  /* Sigortalar iki sütunlu liste; yarım genişliğe sığmaz, tam satıra iner */
  .ftr-grid > div:nth-child(2){grid-column:1 / -1}
}