/* ===========================================================
   MOBİL DENEYİM · Ankara Anıttepe Rotary Kulübü
   style.css / sayfalar.css / panel.css üzerine biner, EN SON yüklenir.
   İlke: masaüstünü telefona sığdırmak değil, telefonda mantıklı ve
   rahat kullanım. Kesme noktaları:
     980  menü hamburger olur (style.css)
     900  üye paneli çekmece menüye geçer
     720  tablolar kart olur, başlık satırı gizlenir
     700  slider görseli tam gösterilir, hero'lar kısalır
     560  tek sütun, üst şerit sadeleşir
   =========================================================== */

/* ---------- güvenlik ağı: yatay kayma olmasın ---------- */
html,body{overflow-x:clip}
img,svg,video,canvas{max-width:100%}
.panel-layout > *,.kayit-grid > *,.etkinlik-grid > *,.sm-duzen > *,.pr-duzen > *,
.metin-layout > *,.iletisim-grid > *,.bm-grid > *,.mektup-grid > *,.past-grid > *,
.pres-layout > *,.grid2 > *,.grid3 > *,.leader > *,.card > *{min-width:0}
td,th,.uyari,.cikti-metin,.gecici-eposta,.mg-eposta,.ib-kutu,.kunye dd{overflow-wrap:anywhere}
.btn{white-space:nowrap}

/* ---------- ikonlar (emoji yerine) ---------- */
.ikon{display:inline-block;vertical-align:-.2em;flex:none}
.geri-baglanti{display:inline-flex;align-items:center;gap:.35rem;color:var(--azure);font-weight:600}
.giris-geri{display:inline-flex;align-items:center;gap:.35rem}
.utility .uye-link{gap:.4rem}
.pu-out{display:grid;place-items:center}
.ikon-onay{color:var(--grass)}

/* menü oku: metin ▾ yerine çizgi köşe */
.has-sub > a::after{content:"";width:.42em;height:.42em;border:solid currentColor;
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg);display:inline-block;
  margin:0 0 .22em .55em;opacity:.75;transition:transform .25s}
@media (max-width:980px){
  .has-sub > a::after{float:right;margin-top:.5em;transform:rotate(45deg)}
  .has-sub.open > a::after{transform:rotate(225deg)}
  .nav{max-height:calc(100vh - 90px);overflow-y:auto}
}

/* ---------- panel: çekmece menü (900 altı) ---------- */
.panel-menu{display:none;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;place-items:center;cursor:pointer;flex:none}
.pn-ust{display:none}
.panel-perde{display:none}
.ob-tasi{display:none}
.pr-ajanda{display:none}

@media (max-width:900px){
  .panel-top{gap:.7rem;padding:.6rem .9rem}
  .panel-top .logo img{height:34px}
  .panel-badge{display:none}
  .panel-menu{display:grid}
  .panel-user{gap:.5rem}

  .panel-layout{display:block}
  .panel-nav{position:fixed;top:0;bottom:0;left:0;width:min(84vw,320px);z-index:80;
    background:linear-gradient(185deg,#0E2247,#091629);
    transform:translateX(-102%);transition:transform .3s var(--ease);
    overflow-y:auto;display:block;padding:0 0 1.4rem;border-right:0;min-height:0;
    height:auto;white-space:normal}
  .panel-nav.acik{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.28)}
  .pn-ust{display:flex;align-items:center;gap:.8rem;padding:1.05rem 1rem 1.05rem 1.3rem;
    background:linear-gradient(115deg,#0A1932,#163972);color:#fff;margin-bottom:.7rem;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .pn-ust b{display:block;font-size:.95rem;line-height:1.25}
  .pn-ust span{display:block;font-size:.76rem;color:#b9cdea}
  .pn-ust .pn-kapat{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;
    background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
  .pn-group{display:block;padding:0 .9rem 1.1rem;white-space:normal}
  .pn-group.admin{padding-top:1.1rem}
  .pn-title{display:flex;padding:.5rem .7rem .35rem}
  .panel-nav a{display:flex;padding:.7rem .8rem;font-size:.95rem}
  .panel-nav a.active::before{left:-.9rem}
  .pn-foot{display:block;padding:1rem 1.6rem}
  .panel-perde{display:block;position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:75;
    opacity:0;pointer-events:none;transition:opacity .3s}
  .panel-perde.acik{opacity:1;pointer-events:auto}
  body.cekmece-acik{overflow:hidden}

  .panel-main{padding:1.1rem 1rem 2.6rem}
  .pane-head{gap:.9rem;margin-bottom:1.2rem}
  .pane-head h1{font-size:1.35rem}
  .pane-head p{font-size:.9rem}
  .pane-head > .btn,.pane-head > a.btn,.pane-head > div > form .btn{width:100%;justify-content:center}
  .pane-head > div[style*="flex"]{width:100%}
  .pane-head > div[style*="flex"] form{flex:1 1 auto}
  .tamamlanma{width:100%}
  .blok{padding:1.1rem 1rem}
  .blok legend{font-size:.95rem}
  .form-alt{gap:.7rem}
  .form-alt .btn{flex:1 1 auto;justify-content:center}
  .form-alt .kayit-bilgi{flex-basis:100%}
  .filtre{gap:.4rem}
  .fl{padding:.45em 1em;font-size:.82rem}
  .filtre form{margin-left:0 !important;width:100%}
  .ara{width:100%;min-width:0}
  .acilir > summary{padding:.9rem 1rem}
  .acilir .kayit-form{padding:1rem}

  .yoklama-ust{grid-template-columns:1fr 1fr;gap:.6rem}
  .yu-kutu{padding:.8rem .5rem}
  .yu-kutu b{font-size:1.35rem}
  .yoklama-arac{align-items:stretch;flex-direction:column}
  .yoklama-arac > div{display:flex;gap:.5rem}
  .yoklama-arac .field{min-width:0 !important;width:100%}
  .devam-ozet,.devam-ozet.dort{grid-template-columns:1fr 1fr;gap:.6rem}
  .devam-ozet div{padding:.9rem .6rem}
  .devam-ozet b{font-size:1.5rem}
  .aidat-ozet{grid-template-columns:1fr 1fr;gap:.6rem}
  .ao-kutu{padding:.9rem}
  .ao-kutu b{font-size:1.15rem}
  .uretim-akis{flex-direction:column;align-items:stretch}
  .ua-ok{display:none}
  .rol-secim{grid-template-columns:1fr}
  .ob-panel{grid-template-columns:1fr}
  .ob-tasi{display:grid}
  .sm-tuval-alt{flex-wrap:wrap}
  .mg-satir{gap:.5rem}
  /* üye rehberi: kart yerine taranabilir liste satırı (foto · ad/meslek · kartı aç) */
  .rehber-grid{grid-template-columns:1fr;gap:.55rem}
  .uye-kart{display:grid;grid-template-columns:52px 1fr auto;grid-template-areas:"foto ad link" "foto meslek link";
    column-gap:.8rem;row-gap:.1rem;align-items:center;text-align:left;padding:.7rem .9rem}
  .uye-kart:hover{transform:none}
  .uk-foto{grid-area:foto;width:52px;height:52px;margin:0;font-size:.85rem}
  .uk-foto::after{inset:-4px}
  .uye-kart h3{grid-area:ad;font-size:.95rem;line-height:1.25}
  .uk-meslek{grid-area:meslek;margin-top:0;font-size:.78rem}
  .uk-mini{display:none}
  .uk-link{grid-area:link;font-size:.78rem;white-space:nowrap}
  .mektup-arsiv{grid-template-columns:1fr 1fr;gap:.8rem}
  .yonetim-kutular{grid-template-columns:1fr}
  /* almanak kartı: etiketler tek satır, değer sütunu genişlesin */
  .almanak-kart{padding:1.1rem 1rem 1.2rem 1.5rem}
  .ak-liste{gap:.3rem .7rem}
  .ak-liste dt{white-space:nowrap;text-align:left}

  /* aylık program: ızgara yerine ajanda */
  .pr-ust{gap:.6rem}
  .pr-ust h2{flex:1;text-align:center;font-size:1.1rem;margin:0}
  .pr-ust #jpgIndir{width:100%;margin-left:0 !important;justify-content:center}
  .pr-takvim{display:none}
  .pr-ajanda{display:block}
}

/* ocakbaşı: dokunmatikte sürükleme yerine "gruba taşı" düğmesi */
.ob-tasi{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:6px;
  place-items:center;color:var(--azure);cursor:pointer;flex:none;margin-left:auto;padding:0}
.ob-kisi em + .ob-tasi{margin-left:.35rem}
.ob-kisi em{display:inline-grid;place-items:center;color:#9a6206}
.ob-secim{margin-left:auto;font:inherit;font-size:.8rem;padding:.25em .4em;border:1px solid var(--line);
  border-radius:6px;max-width:55%;background:#fff}

/* aylık program ajandası */
.pr-ajanda{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.pr-ajanda li{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.pr-ajanda li:last-child{border-bottom:0}
.pr-ajanda li b{flex:0 0 2.6rem;font-size:1.15rem;line-height:1.05;color:var(--royal)}
.pr-ajanda li b small{display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-top:.15rem}
.pr-ajanda .ol{display:block;font-weight:600;font-size:.9rem;line-height:1.4}
.pr-ajanda .ol.kulup_toplantisi{color:var(--azure)}
.pr-ajanda .ol.resmi_tatil{color:#B3261E}
.pr-ajanda .ol.bolge{color:#8A5A00}
.pr-ajanda .ol.ocakbasi{color:#0E7C86}
.pr-ajanda .ol.elle::after{content:" ·";color:var(--ink-soft)}
.pr-ajanda li.bos{color:var(--ink-soft);font-size:.88rem}

/* fotoğraf araçları: dokunmatikte hover yok, her zaman görünsün */
@media (hover:none){
  .fs-arac{display:flex}
  .sm-renkler{row-gap:1.7rem}
  .sm-renk span{opacity:1}
}

/* ---------- tablolar: 720 altında kart ---------- */
@media (max-width:720px){
  .tablo:not(.aylik){display:block;background:transparent;border:0;border-radius:0;overflow:visible;font-size:.9rem}
  .tablo:not(.aylik) thead{display:none}
  .tablo:not(.aylik) tbody{display:grid;gap:.7rem}
  .tablo:not(.aylik) tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.4rem 1rem .5rem}
  /* hücre: solda etiket (mutlak), sağda değer olduğu gibi akar — b, span, form bozulmaz */
  .tablo:not(.aylik) td{display:block;position:relative;padding:.5rem 0 .5rem 38%;border:0;
    border-top:1px solid var(--paper-2);text-align:left;min-height:2.2rem}
  .tablo:not(.aylik) td[data-etiket]::before{content:attr(data-etiket);position:absolute;left:0;top:.62rem;
    width:34%;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);line-height:1.3}
  .tablo:not(.aylik) td:first-child{border-top:0;padding:.55rem 0 .35rem;font-size:1rem}
  .tablo:not(.aylik) td:first-child::before{display:none}
  .tablo:not(.aylik) td:not([data-etiket]){padding-left:0}
  .tablo:not(.aylik) td:not([data-etiket]) .mini-btn{display:block;width:100%;text-align:center;padding:.6em}
  .tablo:not(.aylik) td:not([data-etiket]) form{width:100%}
  .tablo:not(.aylik) .ipucu{display:block}
  /* üye listesi: telefonda ikincil sütunlar gizli, kart kısa kalır */
  .tablo.uye-liste td:nth-child(3),.tablo.uye-liste td:nth-child(4){display:none}

  /* yoklama: üye adı üstte, üç durum dokunulabilir seçenek */
  .tablo.yoklama-tablo tr{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.7rem .9rem .8rem}
  .tablo.yoklama-tablo td.sabit{grid-column:1/-1;display:block;border:0;padding:0 0 .45rem;font-weight:700;font-size:.98rem;min-height:0}
  .tablo.yoklama-tablo td.ort{position:relative;display:flex;justify-content:center;align-items:center;
    border:1px solid var(--line);border-radius:8px;padding:.6rem .3rem;min-height:44px;text-align:center;
    background:var(--paper-2);transition:background .15s,color .15s}
  .tablo.yoklama-tablo td.ort[data-etiket]::before{content:attr(data-etiket);position:static;width:auto;flex:none;
    font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;padding:0;text-align:center}
  .tablo.yoklama-tablo td.ort input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  .tablo.yoklama-tablo td.ort:nth-child(2):has(input:checked){background:#0a7a3d;border-color:#0a7a3d;color:#fff}
  .tablo.yoklama-tablo td.ort:nth-child(3):has(input:checked){background:#b8860b;border-color:#b8860b;color:#fff}
  .tablo.yoklama-tablo td.ort:nth-child(4):has(input:checked){background:var(--cranberry);border-color:var(--cranberry);color:#fff}
}

/* ---------- halka açık site ---------- */
@media (max-width:700px){
  /* slider: görsel kırpılmaz, olduğu gibi durur; yazı görselin altında */
  .slides{height:auto}
  .slide{position:absolute;inset:0}
  .slide.is-active{position:relative}
  .slide-fon{display:none}
  .slide-gorsel{position:static;width:100%;height:auto;max-height:68vh;object-fit:contain;background:var(--navy)}
  .slide::after{display:none}
  .slide-body{position:static;padding:1.1rem 1rem 1.6rem;background:var(--navy)}
  .slider:has(.slider-dots) .slide-body{padding-bottom:3.4rem}   /* ok ve noktalara yer */
  .slide-kutu{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;max-width:none;border:0}
  .slide-tag{margin-bottom:.7rem}
  .slide-body h2{font-size:1.45rem;margin-bottom:.9rem;max-width:none;text-shadow:none}
  .slider-arrow{top:auto;bottom:.8rem;transform:none;width:38px;height:38px}
  .slider-dots{bottom:1.6rem}

  /* iç sayfa hero'ları: metin kadar yüksek */
  .hero{min-height:0}
  .hero .wrap{padding-block:2.4rem 2.6rem}
  .hero h1{font-size:1.9rem;max-width:none}
  .hero p{font-size:.98rem;margin-bottom:1.4rem}
  .haber-hero{min-height:0}
  .haber-hero .wrap{padding-top:5.5rem}
  .haber-hero h1{font-size:1.6rem}
  .pagehead{padding-block:1.9rem 2.2rem}
  .pagehead h1{font-size:1.7rem}
  .pagehead p{font-size:.95rem}
  .crumb{font-size:.76rem}

  .section{padding-block:2.4rem}
  .section-head{margin-bottom:1.4rem;gap:1rem}
  .section-head h2{font-size:1.5rem}
  .section-head .btn{width:100%;justify-content:center}
  .termstrip .wrap{gap:.4rem .9rem;font-size:.8rem;padding-block:.7rem}
  .termstrip .dot{display:none}
  .bm-foto{max-width:none}
  .bm-metin h2{font-size:1.6rem}
  .leader{padding:1.2rem}
  .aof{gap:.7rem}
  .aof-item{padding:1.1rem .6rem}
  .aof-item img{width:56px;height:56px}
  .card{grid-template-columns:1fr}
  .card figure{order:-1;margin:0;border-radius:0}
  .book-preview .sheet{width:62%}
  .hero-actions .btn,.mk-btn .btn,.ma-btn .btn{flex:1 1 auto;justify-content:center}
  .foot-top{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem;padding-block:2.4rem}
  .foot-top > div:first-child{grid-column:1/-1}
  .foot-bottom{justify-content:center;text-align:center;gap:.4rem}
  .galeri{grid-template-columns:1fr 1fr;gap:.5rem}
  .paylas{flex-wrap:wrap}
  .komite{padding:1.1rem 1rem}
  .yk-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .yk-kisi{padding:1.2rem .7rem}
  .ykk-foto{width:72px;height:72px}
  .yk-kisi h2{font-size:.92rem}
  .pres-list li{padding:.7rem .5rem}
  .pres-aside{max-width:none}
  .giris-sag{min-height:170px}
  .giris-sol{padding:1.6rem 1.2rem 2rem}
  .giris-kutu h1{font-size:1.45rem}
  .hata-sayfa{padding-block:3rem}
}
@media (max-width:560px){
  /* üst şerit: telefonda posta + üye girişi, dış bağlantılar footer'da */
  .utility .wrap{justify-content:space-between;gap:.8rem;padding-block:.45rem;flex-wrap:nowrap}
  .utility .mail{display:inline-flex;margin-right:0;font-size:.74rem}
  .utility .ext,.utility .rotaract{display:none}
  .topbar .wrap{padding-block:.7rem;gap:1rem}
  .logo img{height:38px}
  .nav{padding:.2rem 1rem 1rem}
  .slide-gorsel{max-height:60vh}
}
@media (max-width:360px){
  .yk-grid{grid-template-columns:1fr}
}