:root{
  --navy:#000063;
  --navy-deep:#000042;
  --navy-link:#1b2585;
  --gold:#f2c014;
  --gold-ink:#8a6708;
  --page:#f5f6f9;
  --tint:#e8ecf3;
  --border:#d3d8e2;
  --ink:#1e2430;
  --muted:#5a6478;
  --sans:"Open Sans",system-ui,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}
a{color:var(--navy-link)}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* künye çubuğu */
.util{background:var(--navy);color:#c9cde8;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.util a{color:#fff;text-decoration:none}
.util a:hover{color:var(--gold)}

/* başlık */
.masthead{background:#fff;border-bottom:3px solid var(--navy)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.identity{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.identity img{width:70px;height:70px;flex:none}
.identity strong{display:block;font-size:22px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:.01em}
.sign{display:inline-block;vertical-align:2px;margin-left:9px;font-size:12px;font-weight:700;
  letter-spacing:.08em;color:var(--gold-ink);border:1px solid #e6d08c;background:#fdf6e0;padding:1px 7px}
.identity small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.mainnav{display:flex;flex-wrap:wrap}
.mainnav a{
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;color:var(--navy);padding:8px 12px;border-bottom:3px solid transparent}
.mainnav a:hover{border-bottom-color:var(--gold)}
.mainnav a.here{border-bottom-color:var(--navy)}

/* afiş */
.banner{background:var(--navy);color:#dfe3f5;position:relative;overflow:hidden}
.banner .wrap{padding-top:42px;padding-bottom:60px;position:relative;z-index:2}
.banner .rule{width:56px;height:4px;background:var(--gold);margin-bottom:16px}
.banner h1{font-size:clamp(25px,4vw,36px);line-height:1.25;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.banner p{max-width:58ch;margin-top:12px;font-size:17px;color:#c3c9e6}
.banner .ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64px;z-index:1}
.callout{display:inline-block;margin-top:20px;background:var(--gold);color:#3d2c00;font-weight:700;
  text-decoration:none;padding:10px 20px;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.callout:hover{background:#ffd23d}

/* yerleşim */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;padding:40px 0 54px}
.layout>main,.layout>.side{min-width:0}
h2{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);
   padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:20px;position:relative}
h2::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--gold)}
.block{margin-bottom:44px}
.block:last-child{margin-bottom:0}
.block>p{max-width:70ch;color:var(--muted)}
.after{font-size:13.5px;color:var(--muted);margin-top:11px}

/* tablolar */
.scroller{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  max-width:100%;border:1px solid var(--border);background:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--tint);text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;
   letter-spacing:.03em;color:var(--navy);padding:9px 11px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 11px;border-bottom:1px solid #edeff4;vertical-align:top;white-space:nowrap}
.ic{display:block}
th{white-space:nowrap}
th:first-child,td.ana{
  position:sticky;left:0;z-index:2;white-space:normal;
  min-width:148px;max-width:190px;border-right:1px solid var(--border);
}
th:first-child{background:var(--tint)}
td.ana{background:#fff}
tbody tr:nth-child(even) td.ana{background:#fafbfd}
tbody tr:nth-child(even) td{background:#fafbfd}
tbody tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;text-transform:uppercase;letter-spacing:.03em}
.tag.on{background:var(--navy);color:#fff}
.tag.wip{background:#fdf6e0;color:var(--gold-ink);border:1px solid #e6d08c}
.tag.off{background:#eef0f5;color:var(--muted);border:1px solid var(--border)}
.pin{display:inline-block;font-size:12px;color:var(--muted);text-decoration:none}
.pin:hover{color:var(--navy-link);text-decoration:underline}
.sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.pin:hover{color:var(--navy-link);text-decoration:underline}

/* çalışmalar */
.work{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}
.work:last-child{border-bottom:0}
.work .shot{background:var(--tint);border:1px solid var(--border);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px}
.work h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:4px}
.work .meta{font-size:13px;color:var(--muted);margin-bottom:7px}
.work p{font-size:15px;color:var(--muted)}

/* üye arama */
.finder{margin:16px 0 14px}
.finder input{width:100%;max-width:380px;padding:10px 12px;border:1px solid var(--border);
  background:#fff;font-family:var(--sans);font-size:15px;color:var(--ink)}
.finder input:focus{outline:none;border-color:var(--navy)}
.finder{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sayac{font-size:13.5px;color:var(--muted)}
.none{padding:16px 13px;font-size:15px;color:var(--muted);background:#fff;border:1px solid var(--border);border-top:0}

/* faydali baglantilar */
.infobox{background:#fdf9ec;border:1px solid #e6d08c;border-left:4px solid var(--gold);padding:16px 18px;margin:18px 0 4px}
.infobox h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-ink);margin-bottom:10px;font-weight:700}
.infobox ul{margin-left:18px;font-size:15px;color:var(--ink)}
.infobox ul li{padding:3px 0}
h3.alt{font-size:14px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;
  margin:26px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.links{list-style:none}
.links li{padding:11px 0;border-bottom:1px solid #edeff4}
.links li:last-child{border-bottom:0}
.links a{font-weight:600;text-decoration:none}
.links a:hover{text-decoration:underline}
.links span{display:block;font-size:14px;color:var(--muted);margin-top:1px}
.dizin{display:flex;gap:5px}
.dizin a{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;color:var(--navy);background:#fff;border:1px solid var(--border);
  padding:3px 7px;white-space:nowrap;line-height:1.3}
.dizin a:hover{background:var(--gold);border-color:#d9a800;color:#3d2c00}
.dizin a img{height:16px;width:auto;display:block}
.dizin a:has(img){padding:3px 5px;background:#fff}
.uyari{background:#fdf6e0;border:1px solid #e6d08c;color:var(--gold-ink);font-size:13.5px;padding:10px 13px;margin-top:12px}

/* sağ sütun */
.side{display:flex;flex-direction:column;gap:20px}
.card{border:1px solid var(--border);background:#fff}
.card h3{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:10px 14px;background:var(--navy);color:#fff}
.card .body{padding:14px}
.card p{font-size:14.5px;color:var(--muted)}
.card .addr{font-size:14.5px;color:var(--ink);line-height:1.75}
.linkbtn{display:inline-block;margin-top:11px;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:700;font-size:13px;padding:9px 16px;text-transform:uppercase;letter-spacing:.04em}
.linkbtn:hover{background:var(--navy-deep)}
.status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-top:9px}
.status i{width:9px;height:9px;background:var(--gold);border-radius:50%;flex:none}
.mapslot{border:1px dashed var(--border);background:#fafbfd;padding:26px 12px;text-align:center;
  font-size:13px;color:var(--muted);margin-top:11px}
.card .hours{margin-top:11px;padding-top:11px;border-top:1px solid var(--border);
  font-size:14px;color:var(--muted);line-height:1.8}
.card .hours b{color:var(--ink);font-weight:700}
.map{width:100%;height:190px;border:1px solid var(--border);margin-top:12px;display:block}
.card ol{margin-left:18px;font-size:14.5px;color:var(--muted)}
.card ol li{padding:4px 0}

/* alt bilgi */
footer{background:var(--navy-deep);color:#b3badd;padding:34px 0 28px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
footer h4{color:#fff;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-weight:700}
footer a{color:#c9cde8;text-decoration:none;display:block;padding:2px 0}
footer a:hover{color:var(--gold)}
.colophon{border-top:1px solid #1a2166;margin-top:24px;padding-top:15px;font-size:13px;color:#8a92bd}

.kaydir{display:none;font-size:12.5px;color:var(--muted);margin-top:8px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:34px;padding-top:28px}
  .masthead .wrap{align-items:flex-start}
  .mainnav{margin-left:-11px}
  .banner .wrap{padding-top:34px;padding-bottom:52px}
}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .util{font-size:12px}
  .util .wrap{gap:2px}
  .identity img{width:54px;height:54px}
  .identity strong{font-size:18px}
  .identity small{font-size:11.5px}
  .sign{margin-left:0;display:inline-block;margin-top:4px}
  .mainnav a{font-size:12.5px;padding:7px 10px}
  h2{font-size:18px}

  /* tablo kendi içinde yana kaydırılır, ilk sütun sabit kalır */
  table{font-size:13.5px}
  th{padding:8px 9px;font-size:11px}
  td{padding:8px 9px}
  th:first-child,td.ana{min-width:124px;max-width:140px}
  td.ana b{display:block;line-height:1.3}
  .sub{font-size:11px}

  .card h3,.box-h{font-size:12.5px}
  .map{height:220px}
  .work{grid-template-columns:1fr;gap:12px}
  .work .shot{aspect-ratio:16/9}
  .infobox{padding:14px 15px}
  .infobox ul{font-size:14.5px}
  .links a{font-size:15px}
  footer .wrap{gap:20px}
}

@media (max-width:420px){
  .banner h1{font-size:22px}
  .banner p{font-size:15.5px}
  .callout{width:100%;text-align:center}
  th:first-child,td.ana{min-width:112px;max-width:124px}
}


/* ================= ALT SAYFALAR ================= */
.sayfabas{background:var(--navy);color:#dfe3f5}
.sayfabas .wrap{padding-top:34px;padding-bottom:34px}
.sayfabas .ustyazi{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);font-weight:700}
.sayfabas h1{font-size:clamp(23px,3.6vw,32px);color:#fff;font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;margin-top:9px;line-height:1.2}
.sayfabas .giris{max-width:66ch;margin-top:12px;color:#c3c9e6;font-size:16.5px}

.sayfa{max-width:800px;margin:0 auto;padding:38px 22px 56px}
.sayfa.gen{max-width:1080px}
.sayfa .block{margin-bottom:40px}
.sayfa .block:last-child{margin-bottom:0}

.kucuknot{font-size:13.5px;color:var(--muted);margin-top:12px}
.kucuknot a{color:var(--navy-link)}

.okuma{list-style:none;margin-top:6px}
.okuma li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--border);font-size:15.5px}
.okuma li:last-child{border-bottom:0}
.okuma li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;background:var(--gold)}

.adimlar{counter-reset:a;list-style:none;margin-top:6px}
.adimlar li{position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--border);font-size:15.5px}
.adimlar li:last-child{border-bottom:0}
.adimlar li::before{
  counter-increment:a;content:counter(a);
  position:absolute;left:0;top:12px;width:28px;height:28px;
  background:var(--navy);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}

/* ================= CANLI PANEL ================= */
.panelkutu{border:1px solid var(--border);background:#fff}
.panelbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 15px;border-bottom:1px solid var(--border);background:var(--tint);
  font-size:13.5px;font-weight:600}
.panelbar span{display:flex;align-items:center;gap:9px;color:var(--navy)}
.panelbar a{font-size:13px;text-decoration:none;font-weight:700}
.panelbar a:hover{text-decoration:underline}
.nokta{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.paneltam{display:block;width:100%;height:78vh;min-height:520px;border:0;background:#fff}

/* ana sayfadaki küçültülmüş pano
   --olcek: küçültme oranı. Pano dar veya geniş görünüyorsa
   yalnızca --gercek ve --olcek değerlerini değiştirin. */
.mini{
  --gercek:1080px;   /* panonun gerçek genişliği */
  --yuk:1500px;      /* gösterilecek yükseklik (gerçek boyutta) */
  --olcek:.25;
  position:relative;overflow:hidden;margin-top:10px;
  border:1px solid var(--border);background:#fff;
  width:100%;
  height:calc(var(--yuk) * var(--olcek));
}
.mini iframe{
  position:absolute;top:0;left:0;border:0;
  width:var(--gercek);height:var(--yuk);
  transform:scale(var(--olcek));transform-origin:top left;
  pointer-events:none;
}
.mini a{position:absolute;top:0;right:0;bottom:0;left:0;display:block}
.mini a:hover{background:rgba(0,0,99,.07)}

@media (max-width:720px){
  .sayfabas .wrap{padding-top:26px;padding-bottom:26px}
  .sayfa{padding:28px 16px 44px}
  .paneltam{height:70vh;min-height:420px}
}