/* İçerik Okulu — ortak kabuk: renk değişkenleri, düğmeler, üst menü, alt bilgi, e-kitap penceresi.
   Ana sayfa ve blogda anasayfa.css'ten önce; araçlar ve eğitim sayfalarında tek başına yüklenir.
   Yabancı sayfa stilleri (sıfırlama, koyu tema) menüyü bozmasın diye temel kurallar kabuk içine kapsamlanır. */
:root{
  --b:#3130DE; --b7:#2523c4; --b50:#eeeffe; --b100:#e0e1fd; --lila:#f4f4fd;
  --gece:#0d0b38; --gece2:#151268; --gece-k:#1a1660;
  --ink:#14152b; --ink2:#4a4e63; --ink3:#6b7086; --cizgi:#e7e8f2;
  --amber:#f5a623; --yesil:#15803d; --yesil50:#e6f6ec;
  --r:20px; --r-s:14px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* temel kurallar :where ile sıfır özgüllükte — aşağıdaki bileşen kurallarını asla ezmez */
:where(.ys-ust,.ys-alt,.ys-modal-kutu,.ys-atla){line-height:1.6;-webkit-font-smoothing:antialiased}
.ys-ust,.ys-alt,.ys-modal-kutu,.ys-atla{font-family:var(--font);text-align:left}
.ys-alt{border:0}
.ys-ust *,.ys-alt *{text-align:inherit}
.ys-alt p{color:inherit}
:where(.ys-ust,.ys-alt,.ys-modal) *{box-sizing:border-box}
:where(.ys-ust,.ys-alt,.ys-modal) img{max-width:100%;height:auto;display:block}
:where(.ys-ust,.ys-alt,.ys-modal) a{color:inherit}
:where(.ys-modal-kutu){color:var(--ink)}
:where(.ys-modal) h2{margin:0;line-height:1.08;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
:where(.ys-ust,.ys-alt,.ys-modal) :focus-visible{outline:3px solid #8b8af5;outline-offset:3px;border-radius:8px}
.ys-kap{width:min(1180px,100% - 40px);margin:0 auto}
.ys-atla{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;z-index:100}
.ys-atla:focus{left:12px}

/* düğmeler */
.ys-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:background .18s ease-out,transform .18s ease-out,border-color .18s ease-out;white-space:nowrap}
.ys-btn:active{transform:translateY(1px)}
.ys-btn-k{background:var(--b);color:#fff;box-shadow:0 10px 30px -10px rgba(49,48,222,.7)}
.ys-btn-k:hover{background:var(--b7)}
.ys-btn-cizgi{color:#fff;border-color:rgba(255,255,255,.35)}
.ys-btn-cizgi:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.ys-btn-beyaz{background:#fff;color:var(--b);border:0}
.ys-btn-beyaz:hover{background:var(--b50)}
.ys-btn-b{min-height:58px;padding:0 30px;font-size:17.5px}
.ys-btn-s{min-height:46px;padding:0 22px}
.ys-link{display:inline-flex;align-items:center;gap:8px;color:var(--b);font-weight:700;text-decoration:none;white-space:nowrap}
.ys-link:hover{gap:12px}
.ys-kas{display:inline-block;color:var(--b);font-weight:800;font-size:14px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}

/* üst menü */
.ys-ust{position:sticky;top:0;z-index:50;background:var(--gece);border-bottom:1px solid rgba(255,255,255,.08)}
.ys-ust-in{display:flex;align-items:center;gap:36px;min-height:80px}
.ys-logo img{height:44px;width:auto}
.ys-nav{display:flex;gap:30px}
.ys-nav a,.ys-giris{color:#fff;text-decoration:none;font-weight:600;font-size:15.5px;opacity:.92}
.ys-nav a:hover,.ys-giris:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.ys-ust-sag{margin-left:auto;display:flex;align-items:center;gap:20px}
.ys-ust-sag .ys-btn{min-height:46px;font-size:15.5px}
.ys-menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ys-menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.ys-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ys-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.ys-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ys-mobil{display:flex;flex-direction:column;padding:8px 20px 18px;background:var(--gece);border-top:1px solid rgba(255,255,255,.08)}
.ys-mobil[hidden]{display:none}
.ys-mobil a{color:#fff;text-decoration:none;font-weight:600;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08)}

/* alt bilgi */
.ys-alt{background:var(--gece);color:rgba(255,255,255,.82);padding:80px 0 0;font-size:16px}
.ys-alt-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.ys-alt-marka img{height:50px;width:auto}
.ys-alt-marka p{margin:20px 0 28px;max-width:400px;line-height:1.6}
.ys-alt nav{display:flex;flex-direction:column;gap:12px}
.ys-alt nav b{color:#fff;font-size:16px;margin-bottom:4px}
.ys-alt nav a{text-decoration:none;color:rgba(255,255,255,.78)}
.ys-alt nav a:hover{color:#fff}
.ys-bulten label:first-child{display:block;color:#fff;font-weight:700;margin-bottom:12px}
.ys-bulten>div{display:flex;gap:10px}
.ys-bulten input[type=email]{flex:1;min-width:0;height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 20px;font:inherit;font-size:16px}
.ys-bulten input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.ys-bulten .ys-btn{min-height:52px}
.ys-izin{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7);cursor:pointer}
.ys-izin input{margin-top:3px;accent-color:var(--b);width:16px;height:16px;flex:0 0 auto}
.ys-izin a{color:#fff}
.ys-bulten-mesaj{display:block;margin-top:10px;font-size:14px;min-height:1em}
.ys-bulten-mesaj.ok{color:#4ade80}.ys-bulten-mesaj.hata{color:#fca5a5}
.ys-alt-son{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.1);margin-top:64px;padding:26px 0 32px;font-size:14.5px}
.ys-alt-son span{display:inline-flex;align-items:center;gap:8px}
.ys-alt-son .ys-alt-imza{display:inline;color:rgba(255,255,255,.6)}
.ys-alt-imza a{color:rgba(255,255,255,.82);text-decoration:none}
.ys-alt-imza a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* e-kitap açılır penceresi */
.ys-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.ys-modal[hidden]{display:none}
.ys-modal-arka{position:absolute;inset:0;background:rgba(9,8,40,.72);backdrop-filter:blur(3px);animation:ysSol .2s ease-out}
.ys-modal-kutu{position:relative;width:min(860px,100%);max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:.75fr 1.25fr;background:#fff;border-radius:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:ysGir .25s ease-out}
@keyframes ysSol{from{opacity:0}to{opacity:1}}
@keyframes ysGir{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ys-modal-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:0;background:var(--lila);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.ys-modal-x:hover{background:var(--b100)}
.ys-modal-g{background:radial-gradient(300px 260px at 50% 40%,rgba(91,84,255,.35),transparent 70%),var(--gece);display:flex;align-items:center;justify-content:center;padding:32px}
.ys-modal-g img{width:min(220px,100%);transform:rotate(-3deg);filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.ys-modal-m{padding:40px 38px 32px}
.ys-modal-m h2{font-size:clamp(24px,3vw,32px);margin-bottom:22px}
.ys-etk{display:block;font-weight:700;font-size:15px;margin-bottom:8px}.ys-etk span{color:var(--ink3);font-weight:500}
.ys-girdi{width:100%;height:52px;border:1.5px solid var(--cizgi);border-radius:14px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink)}
.ys-girdi:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 4px var(--b50)}
.ys-izin-acik{color:var(--ink2)!important;margin:14px 0 20px!important;font-size:13px!important}
.ys-izin-acik a{color:var(--b)!important}
.ys-tam{width:100%}
.ys-modal-not{color:var(--ink3);font-size:13.5px;margin:12px 0 0;text-align:center}
.ys-modal-mesaj{margin:10px 0 0;font-size:14.5px;font-weight:600;text-align:center;min-height:1.2em}
.ys-modal-mesaj.ok{color:var(--yesil)}.ys-modal-mesaj.hata{color:#c0392b}
.ys-modal-mesaj a{color:var(--b)}
.ys-modal-p{color:var(--ink2);margin:0 0 22px}
body.ys-modal-acik{overflow:hidden}

/* duyarlı */
@media (max-width:1080px){
  .ys-nav{display:none}
  .ys-menu-btn{display:flex}
  .ys-alt-in{grid-template-columns:1fr 1fr}
  .ys-alt-marka{grid-column:1/-1}
}
@media (max-width:640px){
  .ys-modal{padding:0;align-items:flex-end}
  .ys-modal-kutu{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:94vh}
  .ys-modal-g{padding:22px}.ys-modal-g img{width:120px}
  .ys-modal-m{padding:24px 20px 28px}
  .ys-ust-in{min-height:68px;gap:12px}
  .ys-logo img{height:38px}
  .ys-giris,.ys-ust-sag .ys-btn{display:none}
  .ys-alt-in{grid-template-columns:1fr}
  .ys-bulten>div{flex-direction:column}
}