@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Garamond:wght@300;500;600&display=swap');

:root{
  --navy:#13213F; --amber:#C0700F; --teal:#1F6F63; --teal-l:#2E8F80;
  --ivory:#FDFBF7; --paper:#F3EEE3; --ink:#1a2030;
  --serif:'EB Garamond', Georgia, serif;
  --display:'Cormorant Garamond', Georgia, serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--serif); color:var(--ink); background:var(--ivory);
  line-height:1.7; -webkit-font-smoothing:antialiased}
::selection{background:var(--amber); color:var(--ivory)}

/* ---------- language bar ---------- */
.langbar{position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 40px; mix-blend-mode:difference}
.langbar .brandmini{font-family:var(--display); font-size:20px; letter-spacing:4px;
  color:#fff; font-weight:500; text-decoration:none}
.langs{display:flex; gap:2px}
.langs button{background:none; border:none; color:#fff; cursor:pointer;
  font-family:var(--serif); font-size:15px; letter-spacing:2px;
  padding:6px 12px; opacity:.55; transition:opacity .3s}
.langs button.active{opacity:1; text-decoration:underline; text-underline-offset:5px}
.langs button:hover{opacity:1}
.navleft{display:flex; align-items:center; gap:24px}
.navlink{color:#fff; text-decoration:none; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.72; transition:opacity .3s}
.navlink:hover{opacity:1}

/* ---------- department hero ---------- */
.dhero{position:relative; background:var(--navy); color:var(--ivory);
  padding:170px 24px 110px; text-align:center; overflow:hidden}
.dhero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 45%, rgba(46,143,128,.16), transparent 70%),
             radial-gradient(ellipse 40% 40% at 82% 82%, rgba(192,112,15,.12), transparent 70%);
  pointer-events:none}
.veins{position:absolute; inset:0; opacity:.45; pointer-events:none}
.dhero .idx{position:relative; font-family:var(--display); font-size:15px;
  letter-spacing:.34em; color:var(--amber); margin-bottom:22px}
.dhero h1{position:relative; font-family:var(--display); font-weight:500;
  font-size:clamp(38px,7vw,76px); letter-spacing:.1em; line-height:1.05}
.dhero .sub{position:relative; color:var(--teal-l); letter-spacing:.36em;
  font-size:clamp(12px,2vw,15px); text-transform:uppercase; margin-top:20px}
.dhero .motif{position:relative; color:#9aa3b4; letter-spacing:.26em;
  font-size:13px; margin-top:14px; font-style:italic}

/* ---------- field statement ---------- */
.field{max-width:820px; margin:0 auto; padding:110px 32px 80px}
.eyebrow{text-transform:uppercase; letter-spacing:.4em; font-size:13px;
  color:var(--amber); margin-bottom:40px; text-align:center}
.stmt{font-family:var(--display); font-weight:300;
  font-size:clamp(21px,3.1vw,30px); line-height:1.55; color:var(--navy);
  margin-bottom:34px}
.stmt b{font-weight:600; color:var(--teal); font-style:normal}
.stmt .am{color:var(--amber)}
.rule{width:46px; height:2px; background:var(--amber); margin:0 auto 36px}

/* ---------- course template (AU Ders Şablonu) ---------- */
.tpl{max-width:900px; margin:0 auto; padding:110px 32px 40px; text-align:center}
.tpl .eyebrow{margin-bottom:26px}
.tpl-title{font-family:var(--display); font-weight:500; text-align:center;
  font-size:clamp(28px,4.4vw,42px); color:var(--navy); letter-spacing:.04em; line-height:1.15}
.tpl-sub{text-align:center; color:var(--amber); letter-spacing:.14em;
  font-size:clamp(14px,2vw,17px); margin-top:16px}
.tpl-intro{font-family:var(--display); font-weight:300; color:var(--navy);
  font-size:clamp(19px,2.6vw,25px); line-height:1.6; text-align:center;
  max-width:760px; margin:34px auto 0}
.tpl-h{font-family:var(--display); font-weight:600; color:var(--navy);
  font-size:clamp(23px,3.4vw,30px); letter-spacing:.03em; margin:70px 0 26px;
  padding-bottom:12px; border-bottom:1px solid rgba(19,33,63,.14); text-align:center}
.tpl-h .idx{color:var(--amber); font-size:.7em; letter-spacing:.14em; margin-right:10px}

/* Word-style bordered tables, kept tabular */
.stage-table{width:100%; border-collapse:collapse; font-size:16px; margin:0 auto;
  border:1px solid rgba(19,33,63,.4)}
.stage-table th{text-align:center; font-family:var(--serif); font-weight:600;
  color:var(--teal); letter-spacing:.08em; text-transform:uppercase; font-size:12.5px;
  padding:12px 16px; border:1px solid rgba(19,33,63,.4); background:rgba(31,111,99,.08)}
.stage-table td{padding:16px; border:1px solid rgba(19,33,63,.4);
  vertical-align:top; color:#3f4048; text-align:center}
.stage-table td.etap{font-family:var(--display); font-weight:600; font-size:19px;
  color:var(--navy); letter-spacing:.1em; white-space:nowrap}
.stage-table td.rule-cell{color:#6a6b6f; font-style:italic}
.tbl-wrap{overflow-x:auto}

/* single-column bordered table (Değişmez Kurallar), as in Word */
.rules-table{width:100%; max-width:820px; margin:0 auto; border-collapse:collapse;
  border:1px solid rgba(19,33,63,.4)}
.rules-table td{padding:16px 20px; border:1px solid rgba(19,33,63,.4);
  color:#3f4048; font-size:16.5px; text-align:center}

.steplist{list-style:none; margin:0; padding:0}
.step{padding:18px 0; border-bottom:1px solid rgba(19,33,63,.1)}
.step:last-child{border-bottom:none}
.step .lbl{font-family:var(--display); font-weight:600; font-size:18px;
  color:var(--amber); letter-spacing:.12em; display:block; margin-bottom:6px}
.step p{font-size:16.5px; color:#3f4048; margin:0 0 6px}
.step .hgi{color:var(--navy)}
.step .voice{color:var(--teal); font-weight:600}
.step .bridge{color:#6a6b6f; font-style:italic; font-size:15.5px}
.step em{color:#8a6a2f; font-style:italic}

.example{background:var(--paper); border:1px solid rgba(19,33,63,.09);
  border-radius:3px; padding:12px 30px 8px; margin-top:26px}
.example-title{font-family:var(--display); font-weight:600; font-size:22px;
  color:var(--navy); letter-spacing:.03em; padding:18px 0 6px}
.example-title .idx{color:var(--amber); margin-right:8px}

.rules{max-width:820px; margin:0 auto; padding:0; list-style:none}
.rules li{position:relative; padding:14px 0 14px 32px; font-size:17px; color:#3f4048;
  border-bottom:1px solid rgba(19,33,63,.08)}
.rules li:last-child{border-bottom:none}
.rules li::before{content:"—"; position:absolute; left:0; color:var(--amber); font-weight:600}
.tpl-note{max-width:820px; margin:44px auto 0; padding:26px 30px;
  background:var(--navy); color:#c9cdd6; border-radius:3px;
  font-size:16.5px; line-height:1.7}
.tpl-note b{color:var(--amber); font-weight:400}

/* ---------- modules ---------- */
.modules{background:var(--paper); padding:96px 32px;
  background-image:radial-gradient(circle at 18% 28%, rgba(31,111,99,.05), transparent 42%),
                   radial-gradient(circle at 86% 72%, rgba(192,112,15,.05), transparent 42%)}
.modules-in{max-width:1080px; margin:0 auto}
.modules h2{font-family:var(--display); font-weight:500; text-align:center;
  font-size:clamp(26px,4vw,38px); color:var(--navy); letter-spacing:.05em;
  margin-bottom:54px}
.mgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:52px 46px}
.module{position:relative; padding-top:30px}
.module .n{font-family:var(--display); font-size:15px; color:var(--amber);
  letter-spacing:.2em; position:absolute; top:0; left:0}
.module h3{font-family:var(--display); font-weight:600; font-size:25px;
  color:var(--navy); margin-bottom:12px; letter-spacing:.02em}
.module p{font-size:16.5px; color:#4a4a48}
.module::after{content:""; display:block; width:34px; height:2px;
  background:var(--teal); margin-top:18px; opacity:.5}

/* ---------- method note ---------- */
.method{background:var(--navy); color:var(--ivory); padding:100px 32px;
  text-align:center; position:relative; overflow:hidden}
.method h2{font-family:var(--display); font-weight:500;
  font-size:clamp(25px,4.4vw,40px); letter-spacing:.06em; margin-bottom:26px}
.method p{max-width:640px; margin:0 auto; font-size:18px; color:#c9cdd6}
.method .tri{display:flex; justify-content:center; gap:14px; margin-top:44px; flex-wrap:wrap}
.method .tri span{letter-spacing:.24em; font-size:13px; text-transform:uppercase;
  color:var(--teal-l); padding:10px 20px; border:1px solid rgba(46,143,128,.35); border-radius:2px}
.method .tri span b{color:var(--amber); font-weight:400}

/* ---------- faculties hub grid ---------- */
.hub{max-width:1100px; margin:0 auto; padding:100px 32px 40px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px}
.fcard{display:block; text-decoration:none; color:inherit; background:var(--paper);
  border:1px solid rgba(19,33,63,.09); border-radius:3px; padding:34px 30px 30px;
  position:relative; transition:transform .35s, box-shadow .35s, border-color .35s}
.fcard:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(19,33,63,.13);
  border-color:rgba(192,112,15,.4)}
.fcard .n{font-family:var(--display); font-size:14px; color:var(--amber); letter-spacing:.22em}
.fcard h3{font-family:var(--display); font-weight:600; font-size:27px; color:var(--navy);
  margin:10px 0 12px; letter-spacing:.02em}
.fcard p{font-size:16px; color:#4a4a48}
.fcard .go{display:inline-block; margin-top:20px; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal)}

/* ---------- article link list ---------- */
.articles{max-width:820px; margin:0 auto; padding:96px 32px 40px; text-align:center}
.articles h2{font-family:var(--display); font-weight:500; color:var(--navy);
  font-size:clamp(26px,4vw,38px); letter-spacing:.05em; margin-bottom:44px}
.alink{display:block; text-decoration:none; color:inherit; text-align:left;
  background:var(--paper); border:1px solid rgba(19,33,63,.09); border-radius:3px;
  padding:32px 34px; transition:transform .35s, box-shadow .35s, border-color .35s}
.alink:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(19,33,63,.13);
  border-color:rgba(192,112,15,.4)}
.alink .k{font-family:var(--serif); font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber)}
.alink h3{font-family:var(--display); font-weight:600; font-size:26px; color:var(--navy);
  margin:8px 0 10px; letter-spacing:.02em}
.alink p{font-size:16px; color:#4a4a48}
.alink .go{display:inline-block; margin-top:18px; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal)}

/* ---------- article page ---------- */
.article{max-width:760px; margin:0 auto; padding:92px 32px 30px}
.article .lead{font-family:var(--display); font-weight:300;
  font-size:clamp(21px,2.8vw,28px); color:var(--navy); line-height:1.55; margin-bottom:36px}
.article h2{font-family:var(--display); font-weight:600; color:var(--navy);
  font-size:clamp(22px,3.2vw,29px); letter-spacing:.02em; margin:46px 0 16px;
  padding-bottom:10px; border-bottom:1px solid rgba(19,33,63,.12)}
.article p{font-size:18px; line-height:1.85; color:#33343b; margin-bottom:26px}
.article p b{color:var(--navy); font-weight:600}
.article .pull{font-family:var(--display); font-weight:600; color:var(--teal);
  font-size:clamp(23px,3.3vw,32px); text-align:center; letter-spacing:.02em;
  margin:46px 0; line-height:1.3}
.article ul{list-style:none; margin:6px 0 30px; padding:0}
.article ul li{position:relative; padding:13px 0 13px 28px; font-size:17.5px;
  line-height:1.7; color:#33343b; border-bottom:1px solid rgba(19,33,63,.08)}
.article ul li:last-child{border-bottom:none}
.article ul li::before{content:"—"; position:absolute; left:0; color:var(--amber); font-weight:600}
.article ul li b{color:var(--navy); font-weight:600}
.article .close{font-family:var(--display); font-weight:500; color:var(--navy);
  font-size:clamp(21px,2.9vw,28px); line-height:1.5; text-align:center;
  margin:40px 0 10px; padding-top:30px; border-top:1px solid rgba(19,33,63,.14)}
.article .close .am{color:var(--amber)}
.article figure{margin:44px 0; text-align:center}
.article img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:2px}
.article figcaption{margin-top:12px; font-size:14.5px; line-height:1.6; color:#7a7b80;
  letter-spacing:.02em; font-style:italic}

/* ---------- auth (login / register) ---------- */
.authwrap{min-height:100vh; display:grid; place-items:center; background:var(--navy);
  padding:48px 20px; position:relative; overflow:hidden}
.authwrap .veins{opacity:.35}
.authcard{position:relative; width:100%; max-width:430px; background:var(--ivory);
  border-radius:6px; padding:46px 42px; box-shadow:0 24px 70px rgba(0,0,0,.35)}
.authcard .brand{text-align:center; font-family:var(--display); letter-spacing:.3em;
  color:var(--amber); font-size:13px; text-transform:uppercase; margin-bottom:18px}
.authcard h1{font-family:var(--display); font-weight:500; color:var(--navy);
  font-size:30px; letter-spacing:.03em; text-align:center; margin-bottom:6px}
.authcard .tag{text-align:center; color:#8a8a86; font-size:14px; margin-bottom:26px}
.authcard label{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#6a6b6f; margin:16px 0 6px}
.authcard input{width:100%; padding:12px 14px; border:1px solid rgba(19,33,63,.25);
  border-radius:3px; font-family:var(--serif); font-size:16px; background:#fff; color:var(--ink)}
.authcard input:focus{outline:none; border-color:var(--amber)}
.authbtn{width:100%; margin-top:26px; padding:13px; background:var(--navy); color:var(--ivory);
  border:none; border-radius:3px; font-family:var(--display); font-size:18px; letter-spacing:.08em;
  cursor:pointer; transition:background .3s}
.authbtn:hover{background:var(--amber)}
.autherr{background:rgba(192,112,15,.12); border:1px solid rgba(192,112,15,.45); color:#8a4b0f;
  padding:11px 14px; border-radius:3px; font-size:14px; line-height:1.5; margin-bottom:18px}
.authok{background:rgba(31,111,99,.12); border:1px solid rgba(31,111,99,.45); color:#1f6f63;
  padding:11px 14px; border-radius:3px; font-size:14px; margin-bottom:18px}
.authalt{text-align:center; margin-top:24px; font-size:14px; color:#6a6b6f}
.authalt a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(31,111,99,.4)}
.authalt a:hover{color:var(--amber); border-color:var(--amber)}
.authback{display:block; text-align:center; margin-top:18px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:#a7a7a2; text-decoration:none}
.authback:hover{color:var(--amber)}

/* ---------- footer ---------- */
footer{background:var(--ivory); padding:70px 32px 54px; text-align:center}
footer .backlink{display:inline-block; margin-bottom:30px; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal); text-decoration:none;
  border-bottom:1px solid rgba(31,111,99,.35); padding-bottom:3px}
footer .backlink:hover{color:var(--amber); border-color:var(--amber)}
footer .fmark{font-family:var(--display); font-size:23px; letter-spacing:.14em;
  color:var(--navy); font-weight:500}
footer .dom{color:var(--amber); letter-spacing:.2em; font-size:14px; margin-top:9px}
footer .fine{color:#8a8a86; font-size:13px; margin-top:24px; letter-spacing:.05em}

/* ---------- language visibility ---------- */
[data-lang]{display:none}
[data-lang].show{display:block}
span[data-lang]{display:none}
span[data-lang].show{display:inline}
a[data-lang]{display:none}
a[data-lang].show{display:inline-block}

@media(max-width:640px){
  .langbar{padding:14px 20px}
  .navleft{gap:14px}
  .navlink{font-size:11px; letter-spacing:.12em}
  .langs button{padding:6px 8px; font-size:14px}
  .dhero{padding:140px 22px 90px}
  .field{padding:80px 26px 60px}
  .mgrid{gap:42px 30px}
}