/* ===========================================================================
   TAKAS KORUMA SAYFASI (09.09.2026, Ozgur - Claude Design handoff
   "Oyuneks Takas Koruma")

   Sayfa kurumsal sol menu kabugunun DISINDA, tam genislikte basilir
   (master.blade.php istisnasi); ustte kurumsal sekme seridi
   (css/kurumsal-sekmeler.css, --ku* tokenlar). Icerik sitenin .container'ina
   (1550px) oturur; tuvaldeki 1920/100px kenar bosluklari yerine header ile
   ayni hiza. Yazi tipi sitenin kendi fontu (Wix Madefor Display).

   Eski sayfa 258px sol menu + tek kolon duz metindi (h3 + p yigini); landing
   kurgusuna cevrildi, metin eklenmedi/cikarilmadi (adim karti basliklari, rol
   karti alt basliklari ve hero kartindaki 3 madde tasarimci metnidir, lang'da
   tradeguard_step_*, tradeguard_*_title/_sub, tradeguard_check_*).

   Yapi: hero (baslik + 2 CTA | 7 (+1) gun guvence karti) -> Nasil Calisir?
   (3 adim karti) -> Alici ve satici (2 rol karti; yaptirim maddeleri kirmizi)
   -> Kisaca (3 madde) + Onemli Notlar bandi -> alt CTA (2 kutu).
   Eski order-detail.css bu sayfadan kalkti (kullanilmiyordu).
   =========================================================================== */
.tkSayfa {
    /* rozet kenarligi tuvalde .30 (--kuNaneKenar .28 / Hover .45 arasi) */
    --tkRozetKenar: rgba(128,241,177,.30);
    --tkRozetMetin: var(--kuNane);
    --tkRozetZemin: rgba(128,241,177,.12);
    --tkKirmizi: #E0553F;
    --tkKirmiziZemin: rgba(224,85,63,.06);
    --tkKirmiziKenar: rgba(224,85,63,.28);
    --tkKirmiziBantZemin: rgba(224,85,63,.05);
    --tkKirmiziBantKenar: rgba(224,85,63,.26);
    --tkKirmiziIkonZemin: rgba(224,85,63,.12);
    color: var(--kuMetin); padding-bottom: 80px;
}
body.light .tkSayfa {
    --tkRozetKenar: rgba(19,126,76,.30);
    --tkRozetMetin: #0F6B3F;            /* README kontrast istisnasi: 11px/800 etiket tint zeminde #137E4C 4.36:1 kaliyor */
    --tkRozetZemin: rgba(19,126,76,.10);
    --tkKirmizi: #C4442F;
    --tkKirmiziZemin: rgba(196,68,47,.06);
    --tkKirmiziKenar: rgba(196,68,47,.28);
    --tkKirmiziBantZemin: rgba(196,68,47,.05);
    --tkKirmiziBantKenar: rgba(196,68,47,.26);
    --tkKirmiziIkonZemin: rgba(196,68,47,.12);
}
.tkSayfa a { color: var(--kuNane); }
.tkSayfa a:hover { color: var(--kuNaneHover); }
.tkSayfa > .container { display: flex; flex-direction: column; gap: 56px; }
.tkSayfa svg { display: block; flex: none; }
.tkSayfa h1, .tkSayfa h2, .tkSayfa h3, .tkSayfa p { margin: 0; }

/* ---- Bolum basligi kalibi: kicker -> baslik + saga uzanan cizgi -> aciklama ---- */
.tkBolumBas { display: flex; flex-direction: column; gap: 10px; }
.tkKicker { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--kuNane); }
.tkBaslikSatir { display: flex; align-items: center; gap: 16px; }
.tkBaslikSatir h2 { font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.2; color: var(--kuBaslik); white-space: nowrap; }
.tkBaslikSatir::after { content: ""; flex: 1; height: 1px; background: var(--kuNaneKenar); }
.tkBolumBas p { font-size: 14.5px; line-height: 1.6; color: var(--kuUcuncul); max-width: 780px; text-wrap: pretty; }

/* ---- Kart temeli ---- */
.tkKart { background: var(--kuKart); border: 1px solid var(--kuKenar); box-shadow: var(--kuKartGolge); }

/* ---- Hero: sol metin + 2 CTA | sag guvence karti ---------------------------- */
.tkHero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 60px; align-items: center; padding: 56px 0 8px; }
.tkHeroMetin { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.tkRozet {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 30px; padding: 0 13px 0 10px;
    border-radius: 999px; background: var(--kuNaneZemin); border: 1px solid var(--tkRozetKenar);
    font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tkRozetMetin);
}
.tkRozet svg { width: 14px; height: 14px; color: var(--kuNane); }
.tkHero h1 { font-size: 52px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.04; color: var(--kuBaslik); text-wrap: balance; }
.tkHeroMetin p { font-size: 16px; line-height: 1.65; color: var(--kuUcuncul); text-wrap: pretty; }
.tkEylemler { display: flex; align-items: center; gap: 12px; padding-top: 6px; }

/* Butonlar: ana (nane dolgu) / cerceveli */
.tkSayfa a.tkBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 11px;
    font-size: 13.5px; font-weight: 800; letter-spacing: .3px; line-height: 1; white-space: nowrap;
    background: var(--kuNane); color: var(--kuNaneUstu); transition: filter .16s, background .16s, border-color .16s;
}
.tkSayfa a.tkBtn:hover { filter: brightness(1.08); color: var(--kuNaneUstu); }
.tkSayfa a.tkBtn svg { width: 16px; height: 16px; }
.tkSayfa a.tkBtn.cerceveli {
    padding: 0 20px; font-weight: 700; letter-spacing: 0;
    background: var(--kuKart); color: var(--kuMetin); border: 1px solid var(--kuKenarBelirgin);
}
.tkSayfa a.tkBtn.cerceveli:hover { filter: none; background: var(--kuKartHover); border-color: var(--kuNane); color: var(--kuMetin); }
.tkSayfa a.tkBtn:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }

/* Guvence karti: 7 (+1) gun */
.tkGuvence { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px; }
.tkGun { display: flex; align-items: baseline; gap: 8px; }
.tkGun b { font-size: 52px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; color: var(--kuNane); }
.tkGun i { font-style: normal; font-size: 22px; font-weight: 800; color: var(--kuGovde); }
.tkGun span { font-size: 16px; font-weight: 700; color: var(--kuMetin); }
.tkGuvence p { font-size: 13.5px; line-height: 1.6; color: var(--kuUcuncul); }
.tkGuvence p b { color: var(--kuMetin); font-weight: 700; }
.tkAyrac { height: 1px; background: var(--kuInceKenar); }
.tkOnaylar { display: flex; flex-direction: column; gap: 10px; }
.tkOnaylar li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--kuMetin); }
.tkOnaylar svg { width: 15px; height: 15px; color: var(--kuNane); }
.tkSayfa ul { list-style: none; margin: 0; padding: 0; }

/* ---- Nasil Calisir? — 3 adim karti ------------------------------------------ */
.tkBolum { display: flex; flex-direction: column; gap: 20px; }
.tkAdimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tkAdim { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; }
.tkAdimBas { display: flex; align-items: center; gap: 12px; }
.tkAdimIkon {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--kuNaneZemin); border: 1px solid var(--kuNaneKenar); color: var(--kuNane);
}
.tkAdimIkon svg { width: 19px; height: 19px; }
.tkAdimNo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--kuUcuncul); }
.tkAdim h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; color: var(--kuBaslik); }
.tkAdim p { font-size: 13.5px; line-height: 1.65; color: var(--kuMetin); text-wrap: pretty; }

/* ---- Alici ve satici — 2 rol karti ------------------------------------------- */
.tkRoller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tkRol { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 16px; }
.tkRolRozet {
    display: inline-flex; align-items: center; align-self: flex-start; height: 26px; padding: 0 11px; border-radius: 999px;
    background: var(--tkRozetZemin); border: 1px solid var(--tkRozetKenar);
    font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--tkRozetMetin);
}
.tkRolBas { display: flex; flex-direction: column; gap: 5px; }
.tkRolBas h3 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--kuBaslik); }
.tkRolBas p { font-size: 13px; line-height: 1.6; color: var(--kuUcuncul); }
.tkMaddeler { display: flex; flex-direction: column; gap: 8px; }
.tkMadde { display: flex; gap: 12px; padding: 13px 15px; border-radius: 10px; background: var(--kuBant); border: 1px solid var(--kuKenar); }
.tkMadde svg { width: 16px; height: 16px; margin-top: 1px; color: var(--kuNane); }
.tkMadde p { font-size: 13.5px; line-height: 1.6; color: var(--kuMetin); text-wrap: pretty; }
/* Yaptirim maddesi: kirmizi ton (alici kartinda 1, satici kartinda 1) */
.tkMadde.yaptirim { background: var(--tkKirmiziZemin); border-color: var(--tkKirmiziKenar); }
.tkMadde.yaptirim svg { color: var(--tkKirmizi); }

/* ---- Kisaca + Onemli Notlar ----------------------------------------------------- */
.tkOzetBlok { display: flex; flex-direction: column; gap: 14px; }
.tkOzetBlok .tkBaslikSatir h2 { font-size: 20px; letter-spacing: -.3px; }
.tkOzetler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tkOzet { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; }
.tkOzetIkon {
    flex: none; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--tkRozetZemin); color: var(--kuNane);
}
.tkOzetIkon svg { width: 15px; height: 15px; }
.tkOzet p { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--kuMetin); }

.tkNot {
    display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px;
    background: var(--tkKirmiziBantZemin); border: 1px solid var(--tkKirmiziBantKenar);
}
.tkNotBas { flex: none; display: flex; align-items: center; gap: 11px; }
.tkNotIkon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--tkKirmiziIkonZemin); color: var(--tkKirmizi); }
.tkNotIkon svg { width: 17px; height: 17px; }
.tkNotBas h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; color: var(--kuBaslik); }
.tkNot p { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.6; color: var(--kuMetin); }
.tkNot p span { color: var(--kuUcuncul); }

/* ---- Alt CTA — 2 kutu ------------------------------------------------------------ */
.tkCtalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tkCta { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; }
.tkCtaIkon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--kuKartHover); color: var(--kuNane); }
.tkCtaIkon svg { width: 20px; height: 20px; }
.tkCta p { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--kuMetin); }
.tkCta p strong { color: var(--kuBaslik); font-weight: 700; }
.tkSayfa .tkCta a.tkBtn { flex: none; height: 44px; padding: 0 20px; border-radius: 10px; font-size: 13px; gap: 8px; }
.tkSayfa .tkCta a.tkBtn svg { width: 15px; height: 15px; }

/* ---- Mobil / tablet (<=991.98, kurumsal-sekmeler.css ile ayni kirilim) ---------- */
@media (max-width: 991.98px) {
    .tkSayfa { padding-bottom: 48px; }
    .tkSayfa > .container { gap: 36px; }
    .tkHero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 0 4px; }
    .tkHeroMetin { gap: 14px; max-width: none; }
    .tkHero h1 { font-size: 32px; letter-spacing: -.9px; line-height: 1.1; }
    .tkHeroMetin p { font-size: 14px; }
    .tkEylemler { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 4px; }
    .tkSayfa .tkEylemler a.tkBtn { width: 100%; }
    .tkGuvence { padding: 20px; border-radius: 16px; gap: 12px; }
    .tkGun b { font-size: 40px; letter-spacing: -1.2px; }
    .tkBaslikSatir h2 { font-size: 22px; letter-spacing: -.5px; white-space: normal; }
    .tkBolumBas p { font-size: 13.5px; }
    .tkAdimlar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .tkAdim { padding: 18px; gap: 11px; }
    .tkRoller { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tkRol { padding: 18px; gap: 12px; }
    .tkOzetler { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tkNot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
    .tkCtalar { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tkCta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .tkSayfa .tkCta a.tkBtn { align-self: stretch; height: 46px; }
}