/* =========================================================
   Şeyhülislam Mahmud Efendi Vakfı — Kurumsal Site
   Tasarım dili: Klasik Osmanlı/İslami motifler, tezhip ilhamlı
   ========================================================= */

:root{
  --c-ink:        #241f1a;   /* koyu is mürekkebi */
  --c-parchment:  #f3ecdb;   /* eskitilmiş kağıt */
  --c-parchment-2:#ece2c9;   /* biraz daha koyu parşömen (kartlar) */
  --c-emerald:    #163d31;   /* koyu zümrüt yeşili */
  --c-emerald-2:  #1f5240;   /* açık zümrüt (hover/aksan) */
  --c-gold:       #b6862c;   /* eskimiş varak altın */
  --c-gold-light: #d9ae5c;   /* parlak altın (ince çizgiler) */
  --c-maroon:     #6a1f2b;   /* bordo/lal aksan */
  --c-line:       rgba(36,31,26,0.14);

  --font-display: 'Cormorant Garamond', 'Noto Serif', serif;
  --font-accent:  'Amiri', 'Noto Naskh Arabic', serif;
  --font-body:    'Lora', 'Noto Serif', serif;

  --maxw: 1180px;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--c-parchment);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--body-font-size, 17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2000;
  background-image:
    radial-gradient(rgba(36,31,26,0.025) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.5;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--heading-weight, 600);margin:0 0 .5em;color:var(--c-emerald);}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- geometric divider (signature motif) ---------- */
.motif-divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto;width:100%;
  color:var(--c-gold);
}
.motif-divider .line{flex:1;max-width:160px;height:1px;background:linear-gradient(90deg,transparent,var(--c-gold),transparent);}
.motif-divider svg{width:22px;height:22px;flex-shrink:0;}

/* ---------- eight-point star pattern strip ---------- */
.star-strip{
  height:14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23b6862c' stroke-width='1' opacity='0.9'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z'/%3E%3Cpath d='M14 7 L21 0 L28 7 L21 14 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:28px 14px;
}

/* ---------- header ---------- */
header.site-header{
  background:var(--c-emerald);
  color:var(--c-parchment);
  position:relative;
  z-index:100;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:12px;column-gap:20px;
  padding:20px 28px;max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0;}
.brand-mark{width:52px;height:52px;flex-shrink:0;object-fit:contain;}
.brand-text{min-width:0;}
.brand-text .kicker{
  font-family:var(--font-accent);
  font-size:13px;letter-spacing:.14em;color:var(--c-gold-light);
  text-transform:uppercase;
}
.brand-text h1{
  color:var(--c-parchment);
  font-size:clamp(16px, 1.6vw, 22px);margin:0;line-height:1.25;
  white-space:nowrap;
}
nav.main-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;
}
nav.main-nav a{
  display:inline-block;padding:10px 16px;font-size:15px;
  letter-spacing:.02em;position:relative;white-space:nowrap;
  transition:color .2s ease;
}
nav.main-nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;height:1px;
  background:var(--c-gold-light);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
nav.main-nav a:hover::after,
nav.main-nav a.active::after{transform:scaleX(1);}
nav.main-nav a.active{color:var(--c-gold-light);}

.nav-toggle{
  display:none;background:none;border:1px solid rgba(243,236,219,.4);
  color:var(--c-parchment);width:42px;height:38px;cursor:pointer;
}

/* ---------- hero (arch motif) ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(182,134,44,.18), transparent 55%),
    var(--c-emerald);
  color:var(--c-parchment);
  overflow:hidden;
  padding:96px 28px 0;
  text-align:center;
}
.hero .container{position:relative;z-index:2;}
.hero .kicker{
  font-family:var(--font-accent);
  color:var(--c-gold-light);letter-spacing:.16em;text-transform:uppercase;font-size:14px;
  margin-bottom:18px;
}
.hero h2{
  color:var(--c-parchment);
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.15;margin-bottom:22px;
  max-width:820px;margin-left:auto;margin-right:auto;
}
.hero .lede{
  max-width:640px;margin:0 auto 34px;
  font-size:19px;color:rgba(243,236,219,.86);
}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-bottom:70px;flex-wrap:wrap;}

.btn{
  display:inline-block;padding:13px 30px;border-radius:var(--radius);
  font-family:var(--font-display);font-size:16px;letter-spacing:.03em;
  border:1px solid transparent;transition:all .2s ease;cursor:pointer;
}
.btn-gold{background:var(--c-gold);color:var(--c-ink);border-color:var(--c-gold);}
.btn-gold:hover{background:var(--c-gold-light);}
.btn-outline{border-color:rgba(243,236,219,.55);color:var(--c-parchment);}
.btn-outline:hover{border-color:var(--c-gold-light);color:var(--c-gold-light);}
.btn-maroon{background:var(--c-maroon);color:var(--c-parchment);}
.btn-maroon:hover{background:#7d2634;}

/* arch silhouette at base of hero */
.hero-arch{
  position:relative;height:64px;
}
.hero-arch svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}

/* ---------- sections ---------- */
section{padding:80px 0;}
.section-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.section-head .kicker{
  font-family:var(--font-accent);color:var(--c-maroon);
  letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:10px;
}
.section-head h2{font-size:var(--section-heading-size, clamp(28px,3.4vw,40px));}
.section-alt{background:var(--c-parchment-2);}

/* pillar / feature cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.card{
  background:var(--c-parchment);
  border:1px solid var(--c-line);
  padding:34px 28px;position:relative;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c-emerald),var(--c-gold));
}
.card .icon{width:40px;height:40px;color:var(--c-maroon);margin-bottom:16px;}
.card h3{font-size:21px;margin-bottom:10px;}
.card p{color:#4a423a;font-size:15.5px;margin-bottom:0;}

/* quote / bismillah block */
.quote-block{
  text-align:center;padding:70px 28px;background:var(--c-emerald);color:var(--c-parchment);
  position:relative;
}
.quote-block .arabic{
  font-family:var(--font-accent);font-size:clamp(26px,3.6vw,38px);
  color:var(--c-gold-light);margin-bottom:16px;line-height:1.6;
}
.quote-block .cite{font-size:14px;letter-spacing:.08em;color:rgba(243,236,219,.7);text-transform:uppercase;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stats .num{font-family:var(--font-display);font-size:44px;color:var(--c-emerald);font-weight:600;}
.stats .lbl{font-size:14px;color:#5c5348;letter-spacing:.03em;}

/* timeline (kronoloji) */
.timeline{position:relative;max-width:760px;margin:0 auto;}
.timeline::before{
  content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;
  background:linear-gradient(var(--c-gold),var(--c-line));
}
.tl-item{position:relative;padding:0 0 40px 66px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item .dot{
  position:absolute;left:14px;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--c-parchment);border:2px solid var(--c-gold);
}
.tl-item .yr{font-family:var(--font-display);color:var(--c-maroon);font-size:19px;margin-bottom:4px;}
.tl-item p{color:#4a423a;font-size:15.5px;}

/* placeholder note */
.note{
  background:#faf3df;border:1px dashed var(--c-gold);
  padding:14px 18px;font-size:14px;color:#6a5a2f;margin:24px 0;
}
.note strong{color:var(--c-maroon);}

/* forms */
form.card-form{max-width:640px;margin:0 auto;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:14px;margin-bottom:6px;color:var(--c-emerald);font-weight:600;}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--c-line);
  background:#fff;font-family:var(--font-body);font-size:15px;border-radius:var(--radius);
}
.field textarea{resize:vertical;min-height:120px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* donation options */
.donate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:50px;}
.donate-card{
  border:1px solid var(--c-line);padding:30px 24px;text-align:center;background:var(--c-parchment);
}
.donate-card h3{font-size:20px;}
.donate-card .amt{font-family:var(--font-display);font-size:30px;color:var(--c-maroon);margin:12px 0;}
.iban-box{
  background:var(--c-emerald);color:var(--c-parchment);padding:34px;text-align:center;
}
.iban-box .code{font-family:monospace;letter-spacing:.06em;font-size:19px;color:var(--c-gold-light);margin-top:10px;}

/* news cards */
.news-card{border:1px solid var(--c-line);background:var(--c-parchment);}
.news-card .meta{padding:22px 24px 0;font-size:13px;color:var(--c-maroon);letter-spacing:.05em;text-transform:uppercase;}
.news-card h3{padding:6px 24px 0;font-size:20px;}
.news-card p{padding:0 24px;color:#4a423a;font-size:15px;}
.news-card .more{display:block;padding:0 24px 22px;font-size:14px;color:var(--c-emerald);font-weight:600;}

/* team / board */
.person{text-align:center;}
.person .avatar{
  width:110px;height:110px;border-radius:50%;margin:0 auto 14px;
  background:var(--c-parchment-2);border:2px solid var(--c-gold);
  display:flex;align-items:center;justify-content:center;color:var(--c-gold);
}
.person h4{font-size:17px;margin-bottom:2px;color:var(--c-ink);font-family:var(--font-display);}
.person .role{font-size:13px;color:var(--c-maroon);letter-spacing:.03em;}

/* map placeholder */
.map-box{
  height:340px;background:var(--c-parchment-2);border:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:center;color:#8a8070;font-size:14px;text-align:center;
}

/* footer */
footer{
  background:var(--c-ink);color:rgba(243,236,219,.82);padding:60px 0 26px;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
footer h4{color:var(--c-gold-light);font-size:15px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;font-family:var(--font-body);font-weight:600;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:10px;font-size:14.5px;}
footer a:hover{color:var(--c-gold-light);}
.footer-bottom{
  border-top:1px solid rgba(243,236,219,.14);padding-top:22px;
  display:flex;justify-content:space-between;font-size:13px;color:rgba(243,236,219,.55);flex-wrap:wrap;gap:10px;
}

/* responsive */
@media(max-width:900px){
  .grid-3,.stats,.donate-grid,.footer-grid{grid-template-columns:repeat(2,1fr);}
  .field-row{grid-template-columns:1fr;}
}
@media(max-width:720px){
  nav.main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--c-emerald);
    display:none;flex-direction:column;border-top:1px solid rgba(243,236,219,.15);
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav ul{flex-direction:column;padding:10px 20px;}
  .nav-toggle{display:block;}
  .brand-text h1{white-space:normal;font-size:17px;}
  .grid-3,.grid-2,.stats,.donate-grid,.footer-grid{grid-template-columns:1fr;}
  .hero{padding-top:70px;}
  section{padding:56px 0;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--c-gold);outline-offset:2px;
}