/* Alanya UCN Yapı | components.css
   Kartlar, formlar, sabit butonlar, buyutec, cerez seridi, sayfalama.
   ========================================================================== */

/* =============================================================== KARTLAR */

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:24px;
}

.card{
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* ust kenarda beliren renk seridi */
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }

.card-link{ display:block; padding:30px 26px 26px; color:inherit; height:100%; }
.card-link:hover{ text-decoration:none; color:inherit; }

.card-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin-bottom:18px;
  border-radius:var(--r);
  background:var(--brand-soft); color:var(--brand);
  transition:background var(--t), color var(--t), transform var(--t);
}
.card:hover .card-ico{ background:var(--grad-brand); color:#fff; transform:rotate(-6deg) scale(1.05); }

.card h3{ margin:0 0 .45em; font-size:1.14rem; }
.card p{ color:var(--ink-soft); font-size:.93rem; margin:0 0 16px; }

.card-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; font-weight:600; color:var(--brand);
}
.card-more svg{ transition:transform var(--t-fast); }
.card:hover .card-more svg,a:hover .card-more svg{ transform:translateX(4px); }

/* ============================================================ GALERI KUTU */

.thumb-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.thumb{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--sand-2);
  box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t);
}
.thumb img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.28,1);
}
.thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(20,18,15,.62));
  opacity:0; transition:opacity var(--t);
}
.thumb:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.thumb:hover img{ transform:scale(1.07); }
.thumb:hover::after{ opacity:1; }
.thumb-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px; color:#fff; font-size:.88rem; font-weight:500;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t);
}
.thumb:hover .thumb-cap{ opacity:1; transform:none; }

/* filtre seridi */
.filter{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px;
}
.filter a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line);
  font-size:.88rem; font-weight:500; color:var(--ink-soft);
  transition:all var(--t-fast);
}
.filter a:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.filter a.on{ background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand); }
.filter a em{
  font-style:normal; font-size:.74rem; padding:1px 7px; border-radius:var(--r-full);
  background:var(--sand-2); color:var(--ink-mute);
}
.filter a.on em{ background:rgba(255,255,255,.24); color:#fff; }

/* ============================================================== FORMLAR */

.field{ display:block; margin-bottom:20px; }
.field > span{
  display:block; margin-bottom:7px;
  font-size:.86rem; font-weight:600; color:var(--ink-soft);
}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=url],.field input[type=number],.field input[type=password],
.field input[type=search],.field select,.field textarea{
  width:100%; padding:13px 16px;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(193,95,43,.12);
}
.field input.has-error,.field textarea.has-error,.field select.has-error{ border-color:var(--bad); }
.field-error{ display:block; margin-top:6px; font-size:.82rem; font-style:normal; color:var(--bad); }

.check{ display:flex; align-items:flex-start; gap:11px; margin-bottom:20px; font-size:.9rem; color:var(--ink-soft); }
.check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--brand); flex:0 0 auto; }
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  font-size:.93rem; color:var(--ink-soft);
}
.check-list li:last-child{ border-bottom:0; }
.check-list svg{ flex:0 0 auto; margin-top:2px; color:var(--brand); }

.field-captcha{ background:var(--gold-soft); border:1px solid #f0dfb8; border-radius:var(--r); padding:16px 18px; }
.field-captcha > span{ color:#8a6a1e; }

.form-note{ padding:14px 18px; border-radius:var(--r); font-size:.92rem; margin:0 0 18px; }
.form-note.ok{ background:#eaf5ea; border:1px solid #c3ddc0; color:var(--ok); }
.form-note.err{ background:#fceeeb; border:1px solid #edc7bf; color:var(--bad); }

.sent-box{
  display:flex; gap:18px; align-items:flex-start;
  background:linear-gradient(135deg,#eef7ee,#e3f1e3);
  border:1px solid #c3ddc0; border-radius:var(--r-lg);
  padding:24px 26px; margin-bottom:24px;
  animation:zoomIn .4s cubic-bezier(.22,.8,.28,1) both;
}
.sent-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--ok); color:#fff;
}
.sent-box strong{ display:block; color:#2d5c33; font-size:1.06rem; margin-bottom:4px; }
.sent-box p{ margin:0; color:#456b49; font-size:.93rem; }

/* ======================================================= SABIT BUTONLAR */

.fab-stack{
  position:fixed; left:20px; bottom:20px; z-index:45;
  display:flex; flex-direction:column; gap:13px;
}
.fab{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.24);
  transition:transform var(--t), box-shadow var(--t);
  animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) both;
}
.fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,.3); text-decoration:none; color:#fff; }
.fab:active{ transform:scale(.95); }
.fab svg{ position:relative; z-index:2; }

.fab-call{ background:var(--grad-brand); animation-delay:.15s; }
.fab-wa{ background:#25D366; animation-delay:.05s; --ico-cut:#25D366; }
.fab-wa:hover{ background:#1eb85b; --ico-cut:#1eb85b; }
/* WhatsApp simgesindeki ahize, butonun zemin renginde oyulur */
.ico-wa .ico-cut{ fill:var(--ico-cut, #25D366); }

.fab-ping{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.5; z-index:1;
  animation:pulseRing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.fab-label{
  position:absolute; left:66px; white-space:nowrap;
  padding:8px 14px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font-size:.83rem; font-weight:500;
  opacity:0; pointer-events:none; transform:translateX(-8px);
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.fab-label::before{
  content:""; position:absolute; left:-4px; top:50%; margin-top:-4px;
  width:8px; height:8px; background:var(--ink); transform:rotate(45deg);
}
.fab:hover .fab-label,.fab:focus-visible .fab-label{ opacity:1; transform:none; }

/* ============================================================= BUYUTEC */

.lightbox[hidden]{ display:none !important; }
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,13,12,.93);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:fadeIn .2s ease both;
}
.lightbox figure{ margin:0; max-width:92vw; max-height:88vh; text-align:center; }
.lightbox img{
  max-width:92vw; max-height:80vh; width:auto; border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:zoomIn .28s cubic-bezier(.22,.8,.28,1) both;
}
.lightbox figcaption{ margin-top:16px; color:#e6e2dc; font-size:.92rem; }
.lb-close,.lb-prev,.lb-next{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; cursor:pointer; transition:background var(--t-fast), transform var(--t-fast);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.22); transform:scale(1.08); }
.lb-close{ top:22px; right:22px; }
.lb-prev{ left:22px; top:50%; margin-top:-24px; }
.lb-next{ right:22px; top:50%; margin-top:-24px; }
.lb-next svg{ transform:rotate(180deg); }

/* ========================================================== CEREZ SERIDI */

.cookie{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:90;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  animation:fadeUp .45s cubic-bezier(.22,.8,.28,1) both;
}
.cookie-in{
  display:flex; align-items:center; gap:24px;
  max-width:var(--wrap); margin:0 auto; padding:20px 24px;
}
.cookie-text{ flex:1 1 auto; font-size:.9rem; color:var(--ink-soft); }
.cookie-text a{ text-decoration:underline; }
.cookie-btns{ display:flex; gap:10px; flex:0 0 auto; }
.cookie-btns .btn,.cookie-btns .btn-line{ padding:10px 20px; font-size:.88rem; }

/* ========================================================== EKMEK KIRINTI */

.crumb{ background:var(--surface-2); border-bottom:1px solid var(--line-soft); }
.crumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  list-style:none; margin:0; padding:15px 0; font-size:.85rem;
}
.crumb li{ display:flex; align-items:center; gap:9px; margin:0; color:var(--ink-mute); }
.crumb li::after{ content:"/"; color:var(--line); }
.crumb li:last-child::after{ display:none; }
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--brand); }

/* ============================================================ SAYFALAMA */

.pager{ display:flex; justify-content:center; align-items:center; gap:7px; margin-top:44px; }
.pager a,.pager span{
  display:flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 13px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  transition:all var(--t-fast);
}
.pager a:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.pager .on{ background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand); }
.pager .dot{ border:0; background:none; min-width:20px; }

/* =============================================================== BLOG */

.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.post-card{
  overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t);
}
.post-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.post-card > a{ display:block; color:inherit; height:100%; }
.post-card > a:hover{ text-decoration:none; color:inherit; }
.post-img{ display:block; overflow:hidden; aspect-ratio:16/10; background:var(--sand-2); }
.post-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.8,.28,1); }
.post-card:hover .post-img img{ transform:scale(1.06); }
.post-body{ display:block; padding:22px 24px 24px; }
.post-body time{
  display:inline-block; margin-bottom:10px; padding:3px 11px;
  border-radius:var(--r-full); background:var(--brand-soft);
  font-size:.74rem; font-weight:600; color:var(--brand); letter-spacing:.02em;
}
.post-body h3{ font-size:1.1rem; margin:0 0 .45em; }
.post-body p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 14px; }

/* =============================================== HATA / YASAL / DETAY */

.error-page{
  display:flex; align-items:center; justify-content:center;
  min-height:64vh; padding:60px 0; text-align:center;
}
.error-box{ max-width:520px; }
.error-code{
  font-family:var(--f-head); font-size:clamp(4rem,10vw,7rem); line-height:1;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  color:transparent; margin-bottom:12px;
}
.legal-text{ max-width:74ch; }
.legal-text h2{ margin-top:2em; }

.detail-img{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:32px; box-shadow:var(--sh-sm); }
.detail-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; margin-bottom:20px;
  border-radius:var(--r); background:var(--grad-brand); color:#fff;
  box-shadow:var(--sh-brand);
}
.detail-cta{
  margin-top:44px; padding:32px 34px;
  background:var(--grad-teal); color:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-teal);
}
.detail-cta h2{ color:#fff; margin-bottom:.4em; }
.detail-cta p{ color:#c5d7da; }
.detail-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.detail-cta-btns .btn{ background:#fff; color:var(--teal-dk); box-shadow:none; }
.detail-cta-btns .btn:hover{ background:#fff; filter:brightness(.96); }

.media-cap{ margin:10px 0 0; font-size:.87rem; color:var(--ink-mute); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.dot{ margin:0 8px; color:var(--line); }

/* ---------------------------------------------------- renk cesitlemesi
   Kartlar sirayla farkli renk ailesi kullanir. Hepsi tek turuncu olunca
   sayfa monoton duruyordu; simdi kiremit / petrol / altin donuyor. */
.card:nth-child(3n+2) .card-ico{ background:var(--teal-soft); color:var(--teal); }
.card:nth-child(3n+2)::before{ background:var(--grad-teal); }
.card:nth-child(3n+2):hover .card-ico{ background:var(--grad-teal); color:#fff; }
.card:nth-child(3n+2) .card-more{ color:var(--teal); }

.card:nth-child(3n+3) .card-ico{ background:var(--gold-soft); color:#a87b1c; }
.card:nth-child(3n+3)::before{ background:var(--grad-gold); }
.card:nth-child(3n+3):hover .card-ico{ background:var(--grad-gold); color:#fff; }
.card:nth-child(3n+3) .card-more{ color:#a87b1c; }

/* ------------------------------------------------------------- bayraklar */
.lang-switch a{ display:inline-flex; align-items:center; gap:7px; }
.flag{
  flex:0 0 auto; display:block;
  border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  transition:transform var(--t-fast);
}
.lang-switch a:hover .flag{ transform:scale(1.08); }
.lang-switch a.on .flag{ box-shadow:0 0 0 2px rgba(255,255,255,.7); }

/* ------------------------------------------------------- yukari cik */
.to-top[hidden]{ display:none !important; }
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:44;
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:50%;
  background:var(--grad-teal); color:#fff;
  border:0; cursor:pointer;
  box-shadow:0 6px 18px rgba(13,58,67,.34);
  opacity:0; transform:translateY(14px) scale(.85);
  transition:opacity var(--t), transform var(--t), box-shadow var(--t);
}
.to-top.on{ opacity:1; transform:none; }
.to-top:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 12px 28px rgba(13,58,67,.4); }
.to-top:active{ transform:scale(.94); }
.to-top svg{ transition:transform var(--t-fast); }
.to-top:hover svg{ transform:translateY(-2px); }

/* --------------------------------------------- sabit butonlar: canli hâl
   Once yalnizca WhatsApp'ta tek halka vardi ve fark edilmiyordu. Simdi:
   iki katmanli halka, belirli araliklarla ziplama ve arama ikonunda calma
   hareketi.

   NOT: ziplama icin transform DEGIL bagimsiz `translate` ozelligi kullanildi.
   transform kullanilsaydi animasyon, uzerine gelince uygulanan
   transform:scale() degerini ezer ve hover etkisi kaybolurdu. */
.fab{
  animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) both,
            fabHop 4s ease-in-out infinite;
}
.fab-wa{ animation-delay:.05s, 1.2s; }
.fab-call{ animation-delay:.15s, 2.2s; }
.fab:hover{ transform:scale(1.08); }

/* ikinci halka: <span> zaten var, ::after ile ikinciyi ureti yoruz */
.fab-ping{ animation:pulseRing 2.2s cubic-bezier(0,0,.2,1) infinite; }
.fab-ping::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; opacity:.55;
  animation:pulseRing 2.2s cubic-bezier(0,0,.2,1) .9s infinite;
}
/* arama butonuna da halka */
.fab-call::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
  background:var(--brand); opacity:.45;
  animation:pulseRing 2.6s cubic-bezier(0,0,.2,1) .5s infinite;
}
/* ikonun kendisi hafifce sallanir */
.fab-call svg{ animation:ring 3.2s ease-in-out infinite; transform-origin:50% 60%; }

@keyframes fabHop{
  0%,84%,100%{ translate:0 0; }
  88%{ translate:0 -8px; }
  92%{ translate:0 0; }
  95%{ translate:0 -4px; }
  98%{ translate:0 0; }
}
@keyframes ring{
  0%,70%,100%{ transform:rotate(0); }
  74%{ transform:rotate(-12deg); }
  78%{ transform:rotate(10deg); }
  82%{ transform:rotate(-7deg); }
  86%{ transform:rotate(4deg); }
}

@media (prefers-reduced-motion:reduce){
  .fab,.fab-ping,.fab-ping::after,.fab-call::before,.fab-call svg{ animation:none !important; translate:none !important; }
  .to-top{ transition:opacity .01ms; }
}

/* ================================================== SAYFA BASLIK BANDI */

.page-hero{
  position:relative; overflow:hidden;
  padding:56px 0 48px;
  background:linear-gradient(135deg, var(--surface-2) 0%, var(--sand-2) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; right:-90px; top:-110px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(193,95,43,.14), transparent 68%);
}
.page-hero::after{
  content:""; position:absolute; left:-70px; bottom:-130px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(29,116,132,.12), transparent 68%);
}
.page-hero > .wrap{ position:relative; z-index:1; }
.page-hero h1{ margin:0 0 .35em; max-width:22ch; }
.page-hero .lead{ max-width:62ch; margin:0; }

.eyebrow{
  display:inline-block; margin-bottom:14px;
  padding:6px 15px; border-radius:var(--r-full);
  background:var(--brand); color:#fff;
  font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
}

/* ============================================ HIZLI ERISIM KARTLARI */

.quick-strip{ padding:0; margin-top:-26px; position:relative; z-index:2; }
.quick-strip > .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quick-card{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  color:var(--ink);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.quick-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); text-decoration:none; color:var(--ink); }
.quick-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r); color:#fff;
}
.q-brand{ background:var(--grad-brand); }
.q-teal { background:var(--grad-teal); }
.q-wa   { background:#25D366; --ico-cut:#25D366; }
.quick-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick-body b{ font-size:.97rem; font-weight:600; }
.quick-body em{
  font-style:normal; font-size:.84rem; color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================ ILETISIM BILGI LISTESI
   Onceki hâlde etiket ve deger ayni satirda yan yana akiyordu ve ic ice
   girmis gorunuyordu. Artik etiket ustte kucuk, deger altta. */

.info-list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.13);
}
.info-list li:last-child{ border-bottom:0; padding-bottom:4px; }
.info-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.1); color:var(--gold);
}
.info-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.info-body b{
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:#8fa9ad;
}
.info-body a,.info-body span{
  font-size:.98rem; line-height:1.5; color:#fff; word-break:break-word;
}
.info-body a:hover{ color:var(--gold); }

/* acik zeminli surumu (Hakkimizda kenar kutusu) */
.fact-list{ list-style:none; margin:0 0 20px; padding:0; }
.fact-list li{
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.fact-list li:last-child{ border-bottom:0; }
.fact-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand);
}
.fact-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fact-body b{
  font-size:.69rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-mute);
}
.fact-body a,.fact-body{ color:var(--ink); }
.fact-body a{ font-size:.95rem; }
.contact-intro{ max-width:70ch; margin-bottom:34px; }

/* --------------------------------------------------- alt bilgi logosu
   brightness(0) once tum pikselleri siyaha cevirir, invert(1) sonra beyaza.
   Saydamlik korunur, kaynak logonun rengi ne olursa olsun sonuc duz beyaz.
   Secici ozellikle uzun tutuldu ki baska bir kural kazara ezmesin. */
.site-foot img.foot-logo.foot-logo-invert{
  filter:brightness(0) invert(1) !important;
}

/* ------------------------------------------------------- blog etiketi */
.post-cat{
  display:inline-block; padding:4px 13px; border-radius:var(--r-full);
  background:var(--brand-soft); color:var(--brand);
  font-size:.78rem; font-weight:600;
}
.post-cat:hover{ background:var(--brand); color:#fff; text-decoration:none; }
.read-time{
  display:inline-flex; align-items:center; gap:6px; margin-left:12px;
  font-size:.83rem; color:var(--ink-mute);
}

/* --------------------------------------- ana sayfa galeri sekmeleri */
.gal-cell{ display:block; }
.gal-cell[hidden]{ display:none !important; }
.filter a[data-gal]{ cursor:pointer; }

/* galeri sekmesi bos oldugunda */
.gal-empty{ margin-top:0; }
.gal-empty[hidden]{ display:none !important; }

/* ------------------------------------------------ sabit sosyal butonlar
   Ayarlar > Sosyal Medya bolumunde adresi girilmis hesaplar icin basilir.
   Birincil butonlardan (arama, WhatsApp) bir tik kucuk tutuldu. */

.fab-social{
  width:48px; height:48px;
  animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay:var(--fab-delay, .3s);
}
.fab-social .ico-brand{ position:relative; z-index:2; }

/* marka renkleri; --ico-cut oyulan parcalarin (YouTube ucgeni,
   LinkedIn harfleri) zemin rengini verir */
.fab-ig{
  background:linear-gradient(45deg,#F9CE34 0%,#EE2A7B 50%,#6228D7 100%);
  --ico-cut:#EE2A7B;
}
.fab-fb{ background:#1877F2; --ico-cut:#1877F2; }
.fab-yt{ background:#FF0000; --ico-cut:#FF0000; }
.fab-li{ background:#0A66C2; --ico-cut:#0A66C2; }
.fab-x { background:#111; --ico-cut:#111; }

.fab-fb:hover{ background:#1466d2; }
.fab-yt:hover{ background:#e00000; --ico-cut:#e00000; }
.fab-li:hover{ background:#095aad; --ico-cut:#095aad; }
.fab-x:hover { background:#000; --ico-cut:#000; }
.fab-ig:hover{ filter:brightness(1.06); }

/* oyulan parcalar genel kural (WhatsApp'taki .ico-wa .ico-cut'i genisletir) */
.ico-cut{ fill:var(--ico-cut, #fff); }

/* Ekran kisaysa yigin icerigi ortmesin: butonlar kuculur.
   Bes sosyal hesabin da dolduruldugu durumda yedi buton oluyor. */
@media (max-height:720px){
  .fab-stack{ gap:9px; }
  .fab{ width:50px; height:50px; }
  .fab-social{ width:42px; height:42px; }
}
@media (max-height:600px){
  .fab-stack{ gap:7px; }
  .fab{ width:46px; height:46px; }
  .fab-social{ width:38px; height:38px; }
}