/*
Theme Name:   Fatih Mosque 2026
Theme URI:    https://fatihmosque.com
Description:  Fatih Mosque / UAMA icin Hello Elementor alt temasi. Lacivert krom, teal aksiyon, pirinc isaret.
Author:       UAMA
Template:     hello-elementor
Version:      1.6.0
Text Domain:  fatih-2026
*/

/* ============================================================
   1. PALET
   ============================================================ */
:root{
  --f-navy:      #1C2049;   /* krom: header, footer, CTA */
  --f-navy-deep: #12152F;   /* en koyu serit */
  --f-accent:    #1B7E6F;   /* aksiyon: link, buton */
  --f-accent-h:  #146356;   /* hover */
  --f-brass:     #82631F;   /* isaret, acik zemin */
  --f-brass-lt:  #D9B45B;   /* isaret, koyu zemin */
  --f-ground:    #F8FAFC;
  --f-surface:   #FFFFFF;
  --f-inset:     #F2F2F8;
  --f-border:    #E2E8F0;
  --f-border-s:  #CBD5E1;
  --f-text:      #334155;
  --f-muted:     #64748B;
  --f-on-navy:   #C6CBE4;
  --f-on-navy-f: #8E96BC;

  /* Yan bosluk. Genis ekranda icerik ortalanan bir kaba girer;
     bantlarin zemini tam genislikte kalir, icerigi ortalanir.
     min(1240px, 92%) kabi 1400px'te durdurur, gecisi de yumusatir. */
  --f-gutter: 56px;
}
@media (max-width:960px){ :root{ --f-gutter:20px } }
@media (min-width:1360px){ :root{ --f-gutter:calc((100% - min(1240px, 92%)) / 2) } }

/* ============================================================
   2. TEMEL
   ============================================================ */
body{
  margin:0;
  background:var(--f-ground);
  color:var(--f-text);
  font-family:Karla, system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.62;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:var(--f-accent);text-decoration:none}
a:hover{color:var(--f-accent-h)}
h1,h2,h3,h4{
  font-family:Newsreader, Georgia, serif;
  font-weight:500; margin:0; line-height:1.15;
  color:var(--f-navy); text-wrap:balance;
}
p{margin:0}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--f-border);font-size:14.5px}
th{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--f-muted);font-weight:700}

/* icerik genisligi */
.f-sayfa{width:100%}
.f-bolum{padding:44px var(--f-gutter) 48px}
.f-bolum--beyaz{background:var(--f-surface);border-top:1px solid var(--f-border);border-bottom:1px solid var(--f-border)}
.f-dar{max-width:820px}

/* ============================================================
   3. HEADER
   ============================================================ */
.f-header{
  background:var(--f-navy);
  padding:16px var(--f-gutter);
  position:relative; z-index:40;
  display:flex; align-items:center; gap:30px;
}
.f-marka{display:flex;align-items:center;gap:12px;margin-right:auto}
.f-marka img{width:52px;height:52px;object-fit:contain;display:block}
.f-marka strong{
  font-family:Newsreader, Georgia, serif;
  font-size:32px; font-weight:600; color:#fff;
}
.f-nav{display:flex;gap:22px;font-size:14.5px;font-weight:500;align-items:center}
.f-nav > a, .f-navgrup > a{color:var(--f-on-navy)}
.f-nav > a:hover, .f-navgrup > a:hover{color:#fff}
.f-nav .aktif{color:#fff;font-weight:700;border-bottom:2px solid var(--f-brass-lt)}
.f-navgrup{position:relative;display:flex;align-items:center}
.f-ok{color:var(--f-on-navy);font-size:9px;margin-left:5px}
.f-navgrup .aktif + .f-ok{color:var(--f-brass-lt)}
.f-altmenu{position:absolute;top:100%;left:-20px;padding-top:16px;display:none}
.f-navgrup:hover .f-altmenu{display:block}
.f-altmenu > div{
  background:var(--f-surface);border:1px solid var(--f-border);
  box-shadow:0 14px 30px rgba(28,32,73,.18);padding:7px 0;
}
.f-altmenu a{
  display:block;padding:9px 20px;color:var(--f-text);
  font-size:14px;font-weight:500;white-space:nowrap;
}
.f-altmenu a:hover{background:var(--f-inset);color:var(--f-navy)}
.f-header-sag{display:flex;gap:9px}
/* hamburger - yalnizca telefonda gorunur, JS yok */
.f-menu-kutu{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.f-menu-dugme{display:none}
.f-bagis{
  font-size:14px;font-weight:700;padding:9px 17px;
  background:#fff;color:var(--f-navy);
}
.f-bagis:hover{background:var(--f-inset);color:var(--f-navy)}

/* klavye ile gezinme */
.f-atla{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--f-navy);padding:10px 18px;font-weight:700;
}
.f-atla:focus{left:8px;top:8px}
.f-header a:focus-visible,.f-footer a:focus-visible{outline:2px solid var(--f-brass-lt);outline-offset:3px}
a:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px}
/* fare ile acilan menu klavyede de acilsin */
.f-navgrup:focus-within .f-altmenu{display:block}

/* ============================================================
   4. BANNER
   ============================================================ */
.f-banner{background:var(--f-surface);border-bottom:1px solid var(--f-border);padding:52px var(--f-gutter) 44px}
.f-etiket{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--f-brass)}
.f-banner h1{font-size:44px;margin-top:11px;letter-spacing:-.018em}
.f-banner .f-ozet{color:var(--f-text);margin-top:14px;max-width:66ch;font-size:17.5px}

/* ============================================================
   5. CTA
   ============================================================ */
.f-cta{background:var(--f-navy);padding:44px var(--f-gutter);display:flex;align-items:center;gap:40px}
.f-cta h2{font-size:27px;color:#fff}
.f-cta p{color:var(--f-on-navy);margin-top:8px;font-size:16px}
.f-cta .f-buton{
  margin-left:auto;display:inline-block;font-size:15px;font-weight:700;padding:14px 30px;
  background:#fff;color:var(--f-navy);white-space:nowrap;
}

/* icerik icindeki birincil buton (acik zeminde) */
.f-buton-teal{
  display:inline-block;font-size:15px;font-weight:700;padding:13px 28px;
  background:var(--f-accent);color:#fff;
}
.f-buton-teal:hover{background:var(--f-accent-h);color:#fff}

/* ============================================================
   5b. EDITOR ICERIGI (blok / klasik editor govdesi)
   ============================================================ */
.f-icerik h2{font-size:26px;margin:34px 0 12px}
.f-icerik h3{font-size:20px;margin:26px 0 9px}
.f-icerik p{margin:0 0 15px}
.f-icerik ul,.f-icerik ol{margin:0 0 16px;padding-left:22px}
.f-icerik li{margin-bottom:7px}
.f-icerik blockquote{
  margin:22px 0;padding:14px 20px;background:var(--f-inset);
  border-left:3px solid var(--f-brass-lt);font-style:italic;
}
.f-icerik table{margin:18px 0}
.f-gorsel{margin:0 0 22px}
.f-gorsel img{display:block}

/* blog listesi */
.f-yazilar{display:flex;flex-direction:column;gap:30px}
.f-yazi{padding-bottom:28px;border-bottom:1px solid var(--f-border)}
.f-yazi:last-child{border-bottom:none}
.f-yazi-tarih{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--f-brass)}
.f-yazi h2{font-size:24px;margin:8px 0 10px}
.f-yazi h2 a{color:var(--f-navy)}
.f-yazi h2 a:hover{color:var(--f-accent-h)}
.f-devam{font-weight:700;font-size:14.5px}
.pagination{margin-top:32px;display:flex;gap:10px;font-weight:700}

/* ============================================================
   5c. SAYFA GOVDELERI (.f-tam)
   Sayfa govdeleri tasarim taslagindan birebir geliyor: satir ici
   stillerle, 1280px'lik bir tuval icin cizilmis halde. Isaretlemeyi
   sinif sistemine cevirmek yerine, satir ici stil dizesini yakalayan
   [style*="..."] seciciriyle mobilde eziyoruz. Boylece taslak ile
   yayindaki sayfa ayni isaretlemeyi tasiyor; tasarim degisince
   yeniden donusturmek yetiyor.
   Satir ici stili ezmek icin !important sart.
   ============================================================ */
.f-tam{max-width:100%;overflow-x:clip}

/* Govde bantlari: zemin tam genislikte, icerik ortalanmis kapta.
   Satir ici "padding: NNpx 56px" degerlerinin yalnizca yanlarini
   eziyoruz; dikey bosluk taslaktaki gibi kaliyor. */
/* Dogrudan cocuk degil, TORUN da olabilir: ana sayfanin kahraman ve
   "Support us" bantlarinda bosluk ic kutuda. Ic ice kullanim yok
   (18 sayfada denetlendi), o yuzden torun secici guvenli. */
.f-tam [style*="px 56px"]{
  padding-left:var(--f-gutter) !important;
  padding-right:var(--f-gutter) !important;
}
/* Metin sutunlari kabin SOL kenarina hizali kalir - ortalanirsa
   bant basligi (tam genislikte) ile govde metni farkli yerden
   basliyor ve sayfa kaymis gorunuyor. Tasarimdaki asimetri
   kasitli; kabin kendisi ortalandigi icin sayfa dengeli duruyor. */
.f-tam img{max-width:100%;height:auto}

@media (max-width:760px){

  /* bant yan bosluklari degiskenden gelir (960px altinda 20px),
     ic kaplar icin de ayni kurali uygula */
  .f-tam [style*="px 56px"]{
    padding-left:var(--f-gutter) !important;
    padding-right:var(--f-gutter) !important;
  }
  .f-tam [style*="max-width: 8"],
  .f-tam [style*="max-width: 9"],
  .f-tam [style*="max-width: 1000px"]{max-width:100% !important}

  /* cok sutunlu izgaralar tek sutuna iner */
  .f-tam [style*="repeat(3, minmax"],
  .f-tam [style*="repeat(2, minmax"],
  .f-tam [style*="grid-template-columns: 1fr 1fr"],
  .f-tam [style*="grid-template-columns: 1fr 0."],
  .f-tam [style*="grid-template-columns: 0.72fr 1fr"],
  .f-tam [style*="grid-template-columns: 1.2fr 1fr"],
  .f-tam [style*="grid-template-columns: 1.15fr 1fr"],
  .f-tam [style*="grid-template-columns: 1.05fr 1fr"],
  .f-tam [style*="grid-template-columns: 186px 1fr"],
  .f-tam [style*="grid-template-columns: 190px 1fr"],
  .f-tam [style*="grid-template-columns: 1fr 150px"],
  .f-tam [style*="grid-template-columns: 1fr auto"],
  .f-tam [style*="grid-template-columns: auto 1fr auto"],
  .f-tam [style*="grid-template-columns: 0.5fr 1fr auto"]{
    grid-template-columns:1fr !important;
  }

  /* dort ve alti sutunlular ikiye iner */
  .f-tam [style*="repeat(4, minmax"],
  .f-tam [style*="repeat(6, minmax"]{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  /* yatay CTA bandi dikeye doner */
  .f-tam [style*="display: flex; align-items: center; gap: 40px"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
  }
  .f-tam [style*="margin-left: auto"]{margin-left:0 !important}

  /* yatay flex satirlari (rakam seritleri, buton siralari) alt alta sarsin.
     Sarmadiklarinda .f-tam'in overflow:clip'i metni kesiyordu. */
  .f-tam [style*="display: flex"]:not([style*="flex-direction: column"]){
    flex-wrap:wrap !important;
  }
  /* sarilinca dikey ayrac cizgileri anlamini yitiriyor */
  .f-tam [style*="border-right: 1px solid"]{
    border-right:none !important;
    padding-right:0 !important;
  }

  /* Butonlar: taslakta "white-space: nowrap" ile tek satira
     zorlanmislar. 350px'lik icerik genisligine "Message him on
     WhatsApp" sigmiyor ve kesiliyordu. Telefonda tam genislik
     blok butona donuyorlar - zaten mobilde beklenen bicim. */
  .f-tam a[style*="white-space: nowrap"][style*="background"],
  .f-tam a[style*="white-space: nowrap"][style*="border: 1px solid"]{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    white-space:normal !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* buton olmayan nowrap baglantilar sarabilsin */
  .f-tam a[style*="white-space: nowrap"]:not([style*="background"]):not([style*="border: 1px solid"]){
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  /* baslik puntolari */
  .f-tam h1[style]{font-size:31px !important}
  .f-tam h2[style]{font-size:24px !important}
  .f-tam h3[style]{font-size:17px !important}

  /* genis tablolar yatay kaydirilabilir olsun */
  .f-tam table{display:block;overflow-x:auto;white-space:nowrap}
}
.f-footer{background:var(--f-navy);color:#fff;padding:50px var(--f-gutter) 0}
.f-footer-izgara{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.f-footer h4{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--f-brass-lt);font-weight:700;
}
.f-footer p{font-size:14.5px;color:var(--f-on-navy);max-width:30ch;margin-top:12px}
.f-footer-liste{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.f-footer-liste a{color:var(--f-on-navy);font-size:14.5px}
.f-footer-liste a:hover{color:#fff}
.f-footer-alt{
  margin:36px calc(var(--f-gutter) * -1) 0;padding:16px var(--f-gutter);background:var(--f-navy-deep);
  display:flex;justify-content:space-between;gap:20px;
  font-size:13px;color:var(--f-on-navy-f);
}
.f-footer-alt a{color:var(--f-on-navy-f)}
.f-footer-alt a:hover{color:var(--f-on-navy)}

/* ============================================================
   7. TELEFON
   ============================================================ */
@media (max-width:960px){
  .f-header{flex-wrap:wrap;padding:14px 16px;gap:10px}
  .f-marka img{width:42px;height:42px}
  .f-marka strong{font-size:22px}
  .f-header-sag{order:2}
  .f-bagis{font-size:13.5px;padding:9px 14px}
  .f-menu-dugme{
    order:1;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 9px;cursor:pointer;
    border:1px solid rgba(255,255,255,.28);
  }
  .f-menu-dugme span{display:block;height:2px;background:#fff}
  .f-menu-kutu:focus-visible + .f-menu-dugme{outline:2px solid var(--f-brass-lt);outline-offset:3px}
  .f-nav{
    order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid rgba(255,255,255,.14);padding-top:6px;
    display:none;
  }
  .f-menu-kutu:checked ~ .f-nav{display:flex}
  .f-cta .f-buton{margin-left:0}
  .f-nav > a{padding:10px 0;font-size:15.5px}
  .f-nav .aktif{border-bottom:none;color:#fff}
  .f-nav > a.aktif{border-left:3px solid var(--f-brass-lt);padding-left:11px}
  .f-navgrup{flex-direction:column;align-items:stretch;width:100%}
  .f-navgrup > a{padding:10px 0;font-size:15.5px}
  .f-navgrup > a.aktif{border-left:3px solid var(--f-brass-lt);padding-left:11px}
  .f-altmenu{position:static;padding-top:0;display:block;width:100%}
  .f-altmenu > div{background:transparent;border:none;box-shadow:none;padding:0}
  .f-altmenu a{color:var(--f-on-navy);padding:7px 0 7px 14px;font-size:14px;white-space:normal}
  .f-altmenu a:hover{background:transparent;color:#fff}
  .f-ok{display:none}
  .f-banner{padding:34px 20px 28px}
  .f-banner h1{font-size:32px}
  .f-bolum{padding:30px 20px 34px}
  .f-cta{flex-direction:column;align-items:flex-start;padding:30px 20px;gap:18px}
  .f-footer{padding:36px 20px 0}
  .f-footer-izgara{grid-template-columns:1fr 1fr;gap:26px}
  .f-footer-alt{margin:26px -20px 0;padding:14px 20px;flex-direction:column;gap:8px}
}

/* ------------------------------------------------------------
   GENIS EKRAN PUNTO OLCEGI
   Govdeler 1280px'lik tuval icin cizildi; 1600px+ bir ekranda
   ayni px degerleri kucuk duruyor. Satir ici punto degerlerini
   olcekliyoruz: govde metni %14, basliklar %10, dev puntolar %5.
   Karakter/satir orani korunsun diye metin sutunu da genisliyor.
   ------------------------------------------------------------ */
@media (min-width:1400px){
  .f-tam [style*="font-size: 75px"]{font-size:79px !important}
  .f-tam [style*="font-size: 56px"]{font-size:59px !important}
  .f-tam [style*="font-size: 46px"]{font-size:48.5px !important}
  .f-tam [style*="font-size: 44px"]{font-size:48.5px !important}
  .f-tam [style*="font-size: 42px"]{font-size:46px !important}
  .f-tam [style*="font-size: 40px"]{font-size:44px !important}
  .f-tam [style*="font-size: 36px"]{font-size:39.5px !important}
  .f-tam [style*="font-size: 34px"]{font-size:37.5px !important}
  .f-tam [style*="font-size: 33px"]{font-size:36.5px !important}
  .f-tam [style*="font-size: 31px"]{font-size:34px !important}
  .f-tam [style*="font-size: 30px"]{font-size:33px !important}
  .f-tam [style*="font-size: 29px"]{font-size:32px !important}
  .f-tam [style*="font-size: 28px"]{font-size:31px !important}
  .f-tam [style*="font-size: 27px"]{font-size:29.5px !important}
  .f-tam [style*="font-size: 26px"]{font-size:28.5px !important}
  .f-tam [style*="font-size: 25px"]{font-size:27.5px !important}
  .f-tam [style*="font-size: 24px"]{font-size:26.5px !important}
  .f-tam [style*="font-size: 23px"]{font-size:26px !important}
  .f-tam [style*="font-size: 22px"]{font-size:25px !important}
  .f-tam [style*="font-size: 21px"]{font-size:24px !important}
  .f-tam [style*="font-size: 20px"]{font-size:23px !important}
  .f-tam [style*="font-size: 19.5px"]{font-size:22px !important}
  .f-tam [style*="font-size: 19px"]{font-size:21.5px !important}
  .f-tam [style*="font-size: 18.5px"]{font-size:21px !important}
  .f-tam [style*="font-size: 18px"]{font-size:20.5px !important}
  .f-tam [style*="font-size: 17.5px"]{font-size:20px !important}
  .f-tam [style*="font-size: 17px"]{font-size:19.5px !important}
  .f-tam [style*="font-size: 16.5px"]{font-size:19px !important}
  .f-tam [style*="font-size: 16px"]{font-size:18px !important}
  .f-tam [style*="font-size: 15.5px"]{font-size:17.5px !important}
  .f-tam [style*="font-size: 15px"]{font-size:17px !important}
  .f-tam [style*="font-size: 14.5px"]{font-size:16.5px !important}
  .f-tam [style*="font-size: 14px"]{font-size:16px !important}
  .f-tam [style*="font-size: 13.5px"]{font-size:15.5px !important}
  .f-tam [style*="font-size: 13px"]{font-size:15px !important}
  .f-tam [style*="font-size: 12.5px"]{font-size:14px !important}
  .f-tam [style*="font-size: 12px"]{font-size:13.5px !important}
  .f-tam [style*="font-size: 11px"]{font-size:12.5px !important}
  .f-tam [style*="font-size: 10.5px"]{font-size:12px !important}

  /* metin sutunu punto ile birlikte genisler */
  .f-tam [style*="max-width: 820px"]{max-width:920px !important}
  .f-tam [style*="max-width: 840px"]{max-width:940px !important}
  .f-tam [style*="max-width: 850px"]{max-width:950px !important}
  .f-tam [style*="max-width: 900px"]{max-width:1000px !important}
}

/* Kahramandaki buyuk marka yazisi. 75px sabit deger telefonda
   satira sigmiyor; ekranla birlikte olceklensin diye clamp. */
.f-marka-yazi{font-size:clamp(34px, 8.2vw, 75px) !important}
@media (min-width:1400px){ .f-marka-yazi{font-size:82px !important} }


/* ============================================================
   7. FORMLAR (Contact Form 7)
   CF7 kendi isaretlemesini uretir; sinif adlarini degistiremiyoruz.
   Bu yuzden .wpcf7 altinda tema degiskenleriyle bicimlendiriyoruz.
   Alanlar 16px'ten kucuk olmamali - iOS Safari daha kucuk puntoda
   alana dokununca sayfayi yakinlastiriyor.
   ============================================================ */
.f-form-kutu{margin-top:26px}
.wpcf7{max-width:100%}
.wpcf7-form p{margin:0}

.f-form-izgara{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:4px;
}
.f-alan--tam{grid-column:1 / -1;margin-top:18px !important}

.wpcf7-form label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--f-navy);line-height:1.5;
}
.f-zorunlu{color:var(--f-accent)}
.f-istege-bagli{
  color:var(--f-muted);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:12px;
}

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=date],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%;margin-top:7px;padding:12px 13px;
  border:1.5px solid var(--f-border);background:var(--f-surface);
  color:var(--f-text);font-family:inherit;font-size:16px;line-height:1.45;
  border-radius:2px;-webkit-appearance:none;appearance:none;
}
.wpcf7-form select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;
}
.wpcf7-form textarea{resize:vertical;min-height:120px}
.wpcf7-form ::placeholder{color:#94A3B8}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{
  outline:none;border-color:var(--f-accent);box-shadow:0 0 0 3px rgba(27,126,111,.14);
}

.f-form-bolum{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--f-brass);margin:30px 0 2px !important;
  padding-top:20px;border-top:1px solid var(--f-border);
}
.f-form-bolum:first-child{margin-top:0 !important;padding-top:0;border-top:none}

.f-form-not{
  font-size:14px;color:var(--f-muted);line-height:1.6;margin-top:20px !important;max-width:62ch;
}
.f-form-gonder{margin-top:20px !important}

.wpcf7-form input[type=submit]{
  font-family:inherit;font-size:15px;font-weight:700;padding:14px 30px;
  background:var(--f-accent);color:#fff;border:none;border-radius:2px;cursor:pointer;
}
.wpcf7-form input[type=submit]:hover{background:var(--f-accent-h)}
.wpcf7-form input[type=submit]:disabled{opacity:.6;cursor:default}
.wpcf7-spinner{margin-left:12px}

/* CF7 geri bildirim kutulari */
.wpcf7-response-output{
  margin:20px 0 0 !important;padding:13px 16px !important;
  border-width:1px !important;border-style:solid !important;font-size:14.5px;border-radius:2px;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:#15803D !important;background:#F0FDF4;color:#14532D}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#B42318 !important;background:#FEF2F2;color:#7A1710}
.wpcf7-not-valid-tip{color:#B42318;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;margin-top:6px}
.wpcf7-form .wpcf7-not-valid{border-color:#B42318}

/* Harita */
.f-harita{border-top:1px solid var(--f-border);border-bottom:1px solid var(--f-border);background:var(--f-inset)}
.f-harita iframe{display:block;width:100%;height:380px;border:0}

@media (max-width:760px){
  .f-form-izgara{grid-template-columns:1fr !important;gap:16px}
  .wpcf7-form input[type=submit]{width:100%}
  .f-harita iframe{height:300px}
}


/* ============================================================
   8. KAYIT FORMU - adimlar ve kart secimi
   Form programa gore dallaniyor; gizlenen bolumler [hidden] ile
   kapaniyor ve icindeki alanlar disabled oluyor.
   ============================================================ */
.f-adim{
  border:1px solid var(--f-border);background:var(--f-surface);
  padding:26px 28px 28px;margin-top:18px;
}
.f-adim:first-child{margin-top:0}
.f-kosul[hidden]{display:none !important}
.f-kosul > .f-adim{margin-top:18px}

.f-adim-baslik{
  display:flex;align-items:center;gap:11px;
  font-family:Newsreader, Georgia, serif;font-size:20px;color:var(--f-navy);
  margin:0 0 18px !important;padding-bottom:14px;border-bottom:1px solid var(--f-border);
}
.f-adim-no{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--f-navy);color:#fff;font-family:Karla,system-ui,sans-serif;
  font-size:13px;font-weight:700;
}

/* kart bicimli radyo secimi */
.f-kart-secim .wpcf7-radio,
.f-kart-secim .wpcf7-checkbox{display:grid;grid-template-columns:1fr;gap:10px}
.f-kart-secim--iki .wpcf7-radio{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-kart-secim .wpcf7-list-item{margin:0;display:block}
.f-kart-secim .wpcf7-list-item label{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1.5px solid var(--f-border);background:var(--f-surface);
  padding:15px 17px;text-transform:none;letter-spacing:0;
  font-size:15.5px;font-weight:500;color:var(--f-text);line-height:1.45;
  transition:border-color .12s, background .12s;
}
.f-kart-secim .wpcf7-list-item label:hover{border-color:var(--f-border-s);background:var(--f-inset)}
.f-kart-secim input[type=radio]{
  flex:none;margin:2px 0 0;width:19px;height:19px;accent-color:var(--f-accent);
}
.f-kart-secim .wpcf7-list-item-label{display:block}
.f-kart-secim .wpcf7-list-item label:has(input:checked){
  border-color:var(--f-accent);background:#F0F7F5;color:var(--f-navy);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--f-accent);
}
.f-kart-secim--kucuk .wpcf7-radio{grid-template-columns:repeat(2,minmax(0,220px))}
.f-kart-secim--kucuk .wpcf7-list-item label{padding:12px 15px;font-size:15px}
.f-kart-secim--hata .wpcf7-list-item label{border-color:#B42318;background:#FEF2F2}

.f-alan--radyo .f-etiket{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--f-navy);margin-bottom:9px;
}
.f-form-izgara--ust{margin-top:18px}

/* onay kutusu */
.f-onay{margin-top:18px;padding:15px 17px;background:var(--f-inset);border:1px solid var(--f-border)}
.f-onay .wpcf7-list-item{margin:0}
.f-onay label{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:500;
  color:var(--f-text);line-height:1.5;
}
.f-onay input[type=checkbox]{flex:none;margin:2px 0 0;width:18px;height:18px;accent-color:var(--f-accent)}

.f-yardim{
  font-size:13.5px;color:var(--f-muted);line-height:1.55;margin-top:10px !important;max-width:66ch;
}
.f-onay .f-yardim{margin-top:9px !important;padding-left:29px}

@media (max-width:760px){
  .f-adim{padding:20px 18px 22px}
  .f-adim-baslik{font-size:18px}
  .f-kart-secim--iki .wpcf7-radio,
  .f-kart-secim--kucuk .wpcf7-radio{grid-template-columns:1fr}
}


/* Adim adim acilan form: once yalnizca program secimi gorunur. */
.f-sonra[hidden]{display:none !important}
.f-sonra.f-acildi{animation:f-belir .28s ease-out}
@keyframes f-belir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.f-adim--secim{border-color:var(--f-border-s)}
.f-yardim--bekle{color:var(--f-brass);font-weight:700;font-size:13px}
.f-sonra:not([hidden]) ~ * .f-yardim--bekle,
.f-secildi .f-yardim--bekle{display:none}
.f-alan.f-kart-secim--hata input,
.f-alan.f-kart-secim--hata select{border-color:#B42318;background:#FEF2F2}
@media (prefers-reduced-motion: reduce){ .f-sonra.f-acildi{animation:none} }


/* Kosullu secimler CF7'de "exclusive checkbox" olmak zorunda (radyo
   grubu gizlendiginde sunucu tarafi hata veriyor). Gorunum radyo
   kalsin diye kutuyu yuvarlaga ceviriyoruz - kullanici tek secimlik
   onay kutusu ile radyo arasindaki farki gormesin. */
.f-kart-secim input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  flex:none;margin:2px 0 0;width:19px;height:19px;
  border:2px solid var(--f-border-s);border-radius:50%;
  background:#fff;position:relative;cursor:pointer;
}
.f-kart-secim input[type=checkbox]:checked{border-color:var(--f-accent)}
.f-kart-secim input[type=checkbox]:checked::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--f-accent);
}
.f-kart-secim input[type=checkbox]:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px}

.f-alan--ust{margin-top:22px !important;padding-top:20px;border-top:1px solid var(--f-border)}


/* ================= 17.09.2026 mobil hizalama duzeltmeleri ================= */
@media (max-width: 760px){
  /* Soru-cevap / iki sutunlu metin satirlari telefonda alt alta gelsin */
  .f-tam [style*="grid-template-columns: 0.85fr 1.15fr"],
  .f-tam [style*="grid-template-columns: 1.55fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Kartlarin ic boslugu tek bir degere insin: metin her kartta ayni yerden bassin */
  .f-tam [style*="px 24px"][style*="background"], .f-tam [style*="px 24px"][style*="border"],
  .f-tam [style*="px 26px"][style*="background"], .f-tam [style*="px 26px"][style*="border"],
  .f-tam [style*="px 28px"][style*="background"], .f-tam [style*="px 28px"][style*="border"],
  .f-tam [style*="px 30px"][style*="background"], .f-tam [style*="px 30px"][style*="border"],
  .f-tam [style*="px 32px"][style*="background"], .f-tam [style*="px 32px"][style*="border"],
  .f-tam [style*="px 34px"][style*="background"], .f-tam [style*="px 34px"][style*="border"],
  .f-tam [style*="px 38px"][style*="background"], .f-tam [style*="px 38px"][style*="border"]{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
@media (max-width: 960px){
  /* Logo, sayfa icerigiyle ayni hizadan bassin (16px -> gutter) */
  .f-header{ padding-left: var(--f-gutter); padding-right: var(--f-gutter); }
}

@media (max-width: 760px){
  /* mobil hizalama - ikinci tur */
  /* Bosluk kartin kendisinde degil ic div'inde oldugunda */
  .f-tam [style*="px 22px"][style*="background"], .f-tam [style*="px 22px"][style*="border"],
  .f-tam [style*="background"] > [style*="px 22px"],
  .f-tam [style*="background"] > [style*="px 24px"],
  .f-tam [style*="background"] > [style*="px 26px"],
  .f-tam [style*="border"] > [style*="px 22px"],
  .f-tam [style*="border"] > [style*="px 24px"],
  .f-tam [style*="border"] > [style*="px 26px"]{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Tek sutuna inen izgaralarda sol ayrac cizgisi ve girintisi anlamsiz kaliyor */
  .f-tam [style*="border-left: 1px solid"]{
    border-left: none !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 760px){
  /* Kart izgaralari tek sutuna indiginde her kartin yuksekligi kendi metnine
     gore degisiyor ve liste duzensiz gorunuyor. Satirlari esitle. */
  /* kart yuksekligi esitleme */
  /* SADECE ana sayfadaki ayracli hizmet listesi. Cerceveli/arka planli
     kartlara UYGULANMAZ: orada esitleme kartin altinda bos alan birakiyor. */
  .f-tam [style*="repeat(2, minmax"][style*="gap: 0 48px"]{
    grid-auto-rows: 1fr;
  }
}

@media (max-width: 760px){
  /* tek tarafli bosluk: tek sutuna inince icerik sola kayiyor */
  .f-tam [style*="padding-right: 38px"]:not([style*="padding-left"]){ padding-right: 0 !important; }
}

@media (max-width: 760px){
  /* Esitlenen liste satirlarinda icerik dikeyde ortalansin; aksi halde
     basligi iki satira tasan oge (Event Halls) satirini doldururken
     digerleri tepeye yapisik kaliyor ve o satir farkli goruunuyor. */
  .f-tam [style*="repeat(2, minmax"][style*="gap: 0 48px"] > a{ align-content: center; }
}
@media (max-width: 520px){
  /* dorder kartli izgara: telefonda iki sutunda sutun basina ~167px kaliyor,
     paragrafli kartlar icin cok dar. Tek sutuna insin. */
  .f-tam [style*="repeat(4, minmax"]{ grid-template-columns: 1fr !important; }
}

@media (min-width: 761px) and (max-width: 1040px){
  /* tablet araligi: mobil kurallari 760px'te bitiyor, masaustu izgaralari
     768px'te cok dar kaliyor (4 sutun = ~175px). Ara bir kademe. */
  .f-tam [style*="repeat(4, minmax"]{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .f-tam [style*="repeat(6, minmax"]{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* ============ 18.09.2026 header ve tablet duzeltmeleri ============ */

@media (max-width: 1040px){
  /* Hizmet listesi: uzun bir baslik (Event Halls...) iki satira tasinca
     o satir digerlerinden yuksek kaliyordu. Tum satirlar esitlendi. */
  .f-tam [style*="repeat(2, minmax"][style*="gap: 0 48px"]{ grid-auto-rows: 1fr; }
}

@media (max-width: 960px){
  /* Header artik sayfayla birlikte kaybolmuyor: yukari kaydirinca geri geliyor.
     Asagi kaydirirken gizlenip yer acmaya devam ediyor. */
  .f-header{
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform .28s ease;
    will-change: transform;
  }
  body.f-header-gizli .f-header{ transform: translateY(-105%); }

  /* Uc cizginin yanina "Menu" yazisi: insanlar ikonu her zaman menu diye
     okumuyor, yazi olunca tiklama olasiligi artiyor. */
  .f-menu-dugme{
    position: relative;
    width: auto;
    height: 42px;
    padding: 0 13px 0 36px;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .f-menu-dugme span{
    position: absolute;
    left: 11px;
    width: 17px;
    height: 2px;
    background: #fff;
  }
  .f-menu-dugme span:nth-child(1){ top: 13px; }
  .f-menu-dugme span:nth-child(2){ top: 20px; }
  .f-menu-dugme span:nth-child(3){ top: 27px; }
  .f-menu-dugme::after{
    content: "Menu";
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
  }
  /* Menu acikken ikon X'e donsun ki kapatmak da acik olsun */
  .f-menu-kutu:checked + .f-menu-dugme span:nth-child(1){ top: 20px; transform: rotate(45deg); }
  .f-menu-kutu:checked + .f-menu-dugme span:nth-child(2){ opacity: 0; }
  .f-menu-kutu:checked + .f-menu-dugme span:nth-child(3){ top: 20px; transform: rotate(-45deg); }
  .f-menu-dugme span{ transition: transform .2s ease, top .2s ease, opacity .2s ease; }

  /* Menu acikken header gizlenmesin */
  body.f-menu-acik .f-header{ transform: none !important; }
}

@media (max-width: 960px){
  /* "MENU" yazisi eklenince Donate alt satira dusuyordu. Header tek satir
     kalsin diye butun parcalar biraz sikistirildi. */
  .f-header{ gap: 8px; }  /* wrap acik kalmali: menu acilinca nav kendi satirina iniyor */
  .f-marka{ min-width: 0; flex-shrink: 1; }
  .f-marka img{ width: 38px; height: 38px; flex-shrink: 0; }
  .f-marka strong{
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .f-menu-dugme{ flex-shrink: 0; padding: 0 11px 0 32px; height: 38px; }
  .f-menu-dugme span{ left: 10px; width: 15px; }
  .f-menu-dugme span:nth-child(1){ top: 12px; }
  .f-menu-dugme span:nth-child(2){ top: 18px; }
  .f-menu-dugme span:nth-child(3){ top: 24px; }
  .f-menu-kutu:checked + .f-menu-dugme span:nth-child(1),
  .f-menu-kutu:checked + .f-menu-dugme span:nth-child(3){ top: 18px; }
  .f-menu-dugme::after{ font-size: 12px; }
  .f-header-sag{ flex-shrink: 0; }
  .f-bagis{ font-size: 13px; padding: 9px 12px; }
  /* Nav yine tam genislikte alt satira acilsin (menu acildiginda) */
  .f-nav{ flex-basis: 100%; }
}
@media (max-width: 374px){
  /* cok dar telefonlarda marka yazisi kuculsun, hicbir sey alta dusmesin */
  .f-marka strong{ font-size: 16px; }
  .f-menu-dugme::after{ font-size: 11px; }
}

/* ---- numara-metin sarmasi: tutarli olsun ----
   Temanin genel "flex-wrap: wrap" kurali her ogeyi KENDI metin uzunluguna
   gore sardigi icin 420-620px arasinda liste dagiliyordu: kisa olan
   (Qurbani) numaranin yaninda kalirken uzun olan (Event Halls) alta
   duyuyordu. Bu listede numara her zaman metnin solunda kalsin. */
@media (max-width: 1040px){
  /* Ozgulluk notu: temanin kurali (0,3,0), bu yuzden burada da
     iki nitelik secicisi kullaniliyor -> (0,3,1) ve kazaniyor. */
  .f-tam [style*="gap: 0 48px"] > a[style*="display: flex"]{
    flex-wrap: nowrap !important;
    align-items: baseline !important;
  }
  .f-tam [style*="gap: 0 48px"] > a[style*="display: flex"] > span:first-child{
    flex: 0 0 26px !important;
  }
  .f-tam [style*="gap: 0 48px"] > a[style*="display: flex"] > span:last-child{
    flex: 1 1 auto !important; min-width: 0 !important;
  }
}

/* ---- 18.09 genis tablolar: kaydirilabilir oldugu gorulsun ---- */
/* /hajj/ ve /nikah-wedding-services/ karsilastirma tablolari kucuk
   ekranda yatay kayabiliyor (satir 285) ama bunun ipucu yoktu:
   kullanici sadece ilk sutunu gorup tablonun bittigini saniyordu. */
@media (max-width:760px){
  .f-tam div[style*="border: 1px solid #E2E8F0"]:has(> table){ position: relative; }
  .f-tam div[style*="border: 1px solid #E2E8F0"]:has(> table)::after{
    content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 30px;
    background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF 78%);
    pointer-events: none;
  }
  .f-tam table{ scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; padding-bottom: 2px; }
  .f-tam table::-webkit-scrollbar{ height: 6px; }
  .f-tam table::-webkit-scrollbar-track{ background: #F1F5F9; border-radius: 3px; }
  .f-tam table::-webkit-scrollbar-thumb{ background: #CBD5E1; border-radius: 3px; }
}