/* Pablo Merhamet Bahçesi — iç sayfa ortak bileşenleri.
   styles.css'ten SONRA yüklenir (header, çekmece, footer, mobil çubuk, renkler oradan gelir).
   Sayfaya özel kurallar css/sayfalar/<sayfa>.css içinde ve `.ic-<sayfa>` altında kapsanır.

   Kurallar: siyah ve lacivert yok; metin #3A2418, ikincil metin #5A4238; zemin #FBF6EE, ikincil yüzey #F3EADF,
   kartlar beyaz. Turuncu #FBB040 yalnızca dolgu (açık zeminde metin olarak kullanılmaz). Mor #6F63A8 beyaz yazılı
   dolgu, #5E5396 küçük metin/bağlantı. Pembe #EF859F acil / geçici yuva. Kahve #895848 etiket.

   Bileşen dizini
   - Kapak ............ .ic-sahne > .ic-kapak (.ic-kapak-foto, .panel-perde, .ic-kapak-ic > .iz, .ic-baslik, .ic-spot)
   - Butonlar ......... .btn + .btn-bagis | .btn-mor | .btn-pembe | .btn-cizgi | .btn-sade  (+ .btn-tam, .btn-kucuk)
   - Bağlantı ......... .ic-lnk
   - Yüzeyler ......... .ic-kart, .ic-yuzey, ton: .ton-turuncu | .ton-mor | .ton-pembe | .ton-krem
   - Yazı ............. .ic-h3, .ic-etiket, .ic-not, .ic-metin (uzun metin), .ic-sayi (büyük rakam; data-rulet ile döner)
   - Form ............. .ic-alanlar > .ic-alan (> label + .ic-girdi), .ic-kutu (checkbox/radio), .ic-hata, .ic-ipucu
   - Seçim ............ .ic-cipler > .ic-cip[aria-pressed], .ic-segment > button[aria-pressed], .ic-adet (− sayı +)
   - Rozet ............ .ic-rozet (+ .acil | .mor | .turuncu | .yesil)
   - Düzen ............ .ic-duzen (iki sütun), .ic-yapiskan, .ic-izgara (--min ile), .ic-ayrac
   - Liste ............ .ic-liste (ikonlu satırlar), .ic-dl (etiket/değer)
   - SSS .............. details.ic-sss > summary
   - Görsel ........... .ic-foto
   - Hareket .......... [data-belir] / [data-belir-grup] (js/main.js), [data-rulet] rulet sayaç
*/

:root{--ic-x:clamp(20px,3.4vw,50px);--ic-ust:96px}

/* ===== kapak (hero) ===== */
.ic-sahne{height:clamp(420px,58vh,560px)!important;overflow:hidden!important;isolation:isolate}
.ic-kapak{border-radius:inherit;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
/* Video kapaklarında masaüstü çerçevesini ekrana göre orantıla.
   Böylece farklı monitör oranlarında object-fit:cover aynı kadraja yakın kalır. */
@media (min-width:881px){.ic-sahne.ic-sahne-video{height:auto!important;min-height:420px!important;aspect-ratio:2.45/1}}
@media (max-width:880px){.ic-sahne{height:clamp(460px,72svh,580px)!important}}
.ic-kapak{position:absolute;inset:0;overflow:hidden}
.ic-kapak-foto{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ic-kapak .panel-perde{background:
  linear-gradient(90deg,rgba(40,24,14,.78) 0%,rgba(40,24,14,.55) 34%,rgba(40,24,14,.18) 62%,rgba(40,24,14,0) 80%),
  linear-gradient(to top,rgba(40,24,14,.7) 0%,rgba(40,24,14,0) 46%),
  linear-gradient(to bottom,rgba(40,24,14,.5) 0%,rgba(40,24,14,0) 24%)}
@media (max-width:880px){.ic-kapak .panel-perde{background:linear-gradient(180deg,rgba(40,24,14,.55) 0%,rgba(40,24,14,.2) 30%,rgba(40,24,14,.7) 64%,rgba(40,24,14,.9) 100%)}}
.ic-kapak-ic{position:absolute;z-index:2;left:var(--ic-x);right:var(--ic-x);bottom:clamp(30px,4.4vw,60px);max-width:min(860px,72vw);color:#F4EDE9}
@media (max-width:880px){.ic-kapak-ic{max-width:none;bottom:28px}}
.iz ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,237,233,.88)}
.iz li+li::before{content:"/";margin-right:8px;opacity:.6}
.iz a{text-decoration:underline;text-decoration-color:rgba(244,237,233,.4);text-underline-offset:4px}
.iz a:hover{color:#fff;text-decoration-color:#fff}
.ic-baslik{margin:0 0 14px;font-size:clamp(2.3rem,4.6vw,4rem);font-weight:900;font-variation-settings:"wdth" 122,"wght" 900;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;color:#F4EDE9;text-wrap:balance}
.ic-spot{margin:0;max-width:52ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:rgba(244,237,233,.93)}
@media (max-width:880px){.ic-baslik{font-size:clamp(1.9rem,8vw,2.6rem)}.ic-spot{font-size:15.5px}}
/* Kelimeler ortadan kesilmez; uzun çeviriler ilgili sayfada biraz küçültülür. */
.ic-baslik,.ic .b-bas h2,.ic-h3{-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
@media (max-width:560px){.ic-baslik{font-size:clamp(1.7rem,7.4vw,2.4rem)}.ic .b-bas h2{font-size:clamp(1.7rem,7.6vw,2.2rem)}}
.ic-kapak-foto{animation:pmb-foto 1.8s var(--ease-cikis) backwards}
.ic-kapak-ic > *{animation:pmb-yukari 1s var(--ease-cikis) backwards}
.ic-kapak-ic > :nth-child(1){animation-delay:.2s}
.ic-kapak-ic > :nth-child(2){animation-delay:.32s}
.ic-kapak-ic > :nth-child(3){animation-delay:.44s}
.ic-kapak-ic > :nth-child(4){animation-delay:.56s}

/* ===== içerik ===== */
.ic{display:block}
/* sınıftaki display değeri hidden özniteliğini ezmesin */
[hidden]{display:none!important}
.ic [id]{scroll-margin-top:var(--ic-ust)}
.ic .bolum + .bolum{padding-top:0!important}

/* ===== butonlar ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.2;cursor:pointer;
  transition:translate .25s var(--ease-cikis),background-color .2s,border-color .2s,color .2s}
.btn:hover{translate:0 -2px}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-bagis{background:#FBB040;color:#3A2418}
.btn-bagis:hover{background:#FCC265}
.btn-mor{background:#6F63A8;color:#fff}
.btn-mor:hover{background:#5E5396}
.btn-pembe{background:#EF859F;color:#3A2418}
.btn-pembe:hover{background:#F398AE}
.btn-cizgi{border-color:#3A2418;color:#3A2418;background:transparent}
.btn-cizgi:hover{background:#fff}
.btn-sade{background:#fff;color:#3A2418;border-color:rgba(58,36,24,.14)}
.btn-sade:hover{border-color:rgba(58,36,24,.4)}
/* ana sayfanın .btn-bagis/.btn-mor kuralları (styles.css) iç sayfa butonlarına sızmasın */
.btn.btn-bagis,.btn.btn-mor{padding:0 24px;letter-spacing:.08em!important;white-space:normal}
.btn.btn-bagis:hover{background:#FCC265!important}
.btn.btn-mor:hover{background:#5E5396}
.btn-tam{width:100%}
.btn-kucuk,.btn.btn-kucuk{min-height:40px;padding:0 16px;font-size:12px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;translate:none}
.ic-lnk{color:#5E5396;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.ic-lnk:hover{color:#3A2418}

/* ===== yüzeyler ===== */
.ic-kart{background:#fff;border:1px solid rgba(58,36,24,.1);border-radius:24px;padding:clamp(20px,2.4vw,32px)}
.ic-yuzey{background:#F3EADF;border-radius:24px;padding:clamp(20px,2.4vw,32px)}
.ton-turuncu{background:#FBB040;border-color:transparent}
.ton-mor{background:#EFEDF8;border-color:transparent}
.ton-pembe{background:#FDE8EE;border-color:transparent}
.ton-krem{background:#F3EADF;border-color:transparent}

/* ===== yazı ===== */
.ic-h3{margin:0 0 10px;font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:900;font-variation-settings:"wdth" 116;line-height:1.15;letter-spacing:-.01em;text-transform:uppercase;color:#3A2418}
.ic-etiket{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#895848}
.ic-not{margin:0;color:#5A4238;font-size:14.5px;line-height:1.6}
.ic-metin{color:#3A2418;font-size:17px;line-height:1.75;max-width:68ch}
.ic-metin p{margin:0 0 1.1em}
.ic-metin h2,.ic-metin h3{font-weight:900;font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;margin:1.6em 0 .6em}
.ic-sayi{display:block;font-size:clamp(2.4rem,4vw,3.6rem);font-weight:900;font-variation-settings:"wdth" 122,"wght" 900;line-height:.95;letter-spacing:-.02em;color:#3A2418;font-variant-numeric:tabular-nums}

/* ===== form ===== */
.ic-alanlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ic-alanlar .genis{grid-column:1/-1}
@media (max-width:560px){.ic-alanlar{grid-template-columns:1fr}}
.ic-alan{display:flex;flex-direction:column;gap:7px;min-width:0}
.ic-alan > label,.ic-alan > .ic-alan-ad{font-size:13.5px;font-weight:700;color:#3A2418}
.ic-girdi{width:100%;min-height:50px;padding:13px 16px;border-radius:14px;border:1.5px solid rgba(58,36,24,.2);background:#fff;color:#3A2418;
  font:inherit;font-size:15.5px;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.ic-girdi::placeholder{color:#76665E;opacity:1}
.ic-girdi:hover{border-color:rgba(58,36,24,.4)}
.ic-girdi:focus{outline:none;border-color:#3A2418;box-shadow:0 0 0 3px rgba(58,36,24,.16)}
textarea.ic-girdi{min-height:130px;resize:vertical}
select.ic-girdi{appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.ic-girdi[aria-invalid="true"]{border-color:#B8375A}
.ic-hata{font-size:13px;font-weight:700;color:#B8375A}
.ic-ipucu{font-size:13px;color:#5A4238}
.ic-kutu{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:#3A2418;cursor:pointer}
.ic-kutu input{appearance:none;flex-shrink:0;width:22px;height:22px;margin:0;border:2px solid rgba(58,36,24,.4);border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.ic-kutu input[type="radio"]{border-radius:50%}
.ic-kutu input:checked{background:#3A2418;border-color:#3A2418}
.ic-kutu input[type="checkbox"]:checked::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #FBF6EE;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ic-kutu input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#FBF6EE}

/* ===== seçim ===== */
.ic-cipler{display:flex;flex-wrap:wrap;gap:8px}
.ic-cip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(58,36,24,.2);background:#fff;color:#3A2418;
  font-size:14px;font-weight:700;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.ic-cip:hover{border-color:rgba(58,36,24,.45)}
.ic-cip[aria-pressed="true"],.ic-cip[aria-selected="true"],.ic-cip.secili{background:#3A2418;border-color:#3A2418;color:#FBF6EE}
.ic-cip .say{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ic-segment{display:flex;gap:4px;padding:4px;border-radius:999px;background:#F3EADF}
.ic-segment button{flex:1;min-height:44px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5A4238;line-height:1.2;transition:background-color .2s,color .2s}
.ic-segment button[aria-pressed="true"],.ic-segment button[aria-selected="true"]{background:#fff;color:#3A2418;box-shadow:0 4px 14px -6px rgba(58,36,24,.35)}
.ic-adet{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1.5px solid rgba(58,36,24,.2);background:#fff}
.ic-adet button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;line-height:1;color:#3A2418;transition:background-color .2s}
.ic-adet button:hover:not(:disabled){background:#F3EADF}
.ic-adet button:disabled{opacity:.35;cursor:not-allowed}
.ic-adet .say{min-width:40px;text-align:center;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}

/* ===== rozet ===== */
.ic-rozet{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#F3EADF;color:#3A2418;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ic-rozet.acil{background:#FDE8EE;color:#B8375A}
.ic-rozet.mor{background:#EFEDF8;color:#5E5396}
.ic-rozet.turuncu{background:#FBB040;color:#3A2418}
.ic-rozet.yesil{background:#E6F0E2;color:#3F6B35}
.ic-rozet i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}

/* ===== düzen ===== */
.ic-duzen{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:start}
.ic-duzen > *{min-width:0}
@media (max-width:980px){.ic-duzen{grid-template-columns:1fr;gap:32px}}
.ic-yapiskan{position:sticky;top:var(--ic-ust)}
@media (max-width:980px){.ic-yapiskan{position:static}}
.ic-izgara{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(var(--min,260px),100%),1fr))}
.ic-ayrac{height:1px;border:0;background:rgba(58,36,24,.12);margin:clamp(22px,3vw,34px) 0}

/* ===== liste ===== */
.ic-liste{list-style:none;margin:0;padding:0;display:grid}
.ic-liste > li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(58,36,24,.1)}
.ic-liste > li:first-child{border-top:1px solid rgba(58,36,24,.1)}
.ic-liste svg{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:#895848}
.ic-liste b{display:block;font-size:15.5px;font-weight:800;margin-bottom:3px;color:#3A2418}
.ic-liste span{font-size:14.5px;line-height:1.55;color:#5A4238}
.ic-dl{margin:0;display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px)}
.ic-dl dt{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#895848}
.ic-dl dd{margin:6px 0 0;font-size:16px;font-weight:700;color:#3A2418}

/* ===== sss ===== */
.ic-sss{border-bottom:1px solid rgba(58,36,24,.12)}
.ic-sss:first-of-type{border-top:1px solid rgba(58,36,24,.12)}
.ic-sss summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:17px;font-weight:800;color:#3A2418}
.ic-sss summary::-webkit-details-marker{display:none}
.ic-sss summary::after{content:"";width:12px;height:12px;flex-shrink:0;border:solid #3A2418;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease-cikis)}
.ic-sss[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ic-sss > div{padding:0 0 22px;color:#5A4238;font-size:15.5px;line-height:1.7;max-width:70ch}

/* ===== görsel ===== */
.ic-foto{border-radius:22px;overflow:hidden;background:#F3EADF}
.ic-foto img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){
  .ic-kapak-foto,.ic-kapak-ic > *{animation:none!important}
  .btn{transition:none}
}
/* dar telefonda uzun tek kelimeli başlıklar (KAHRAMANLARIMIZ) harf ortasından kırılmasın: sığacak boyuta iner */
@media (max-width:430px){.ic-baslik{font-size:clamp(1.45rem,6.5vw,1.9rem)}}

/* Almanca ve İngilizce mobil başlıklar Türkçeden daha uzun olabildiği için kontrollü küçülür. */
@media (max-width:430px){
  html:lang(de) .ic-baslik,html:lang(en) .ic-baslik{font-size:clamp(1.3rem,5.8vw,1.65rem)}
}
/* kapak arka plan videosu: durdur/oynat düğmesi sağ altta */
.ic-kapak .ic-video-dur{top:auto;bottom:clamp(24px,3vw,40px);right:var(--ic-x)}
@media (max-width:880px){.ic-kapak .ic-video-dur{top:96px;bottom:auto;right:16px}}
/* kapakta konu yazının altında kalıyorsa: masaüstünde görsel sola yaslı genişleyip sağa taşar, böylece konu sağa kayar */
@media (min-width:881px){.ic-kapak-foto.saga-yasla{left:0;right:auto;width:150%;max-width:none;object-position:30% 62%!important}}
/* kapak görselinde yazının altında kalmaması gereken bir ayrıntı varsa (ör. Alışveriş'teki tişört esprisi): mobilde görsel üste yaslanıp kısalır, alt kısım koyu zemine karışır */
@media (max-width:880px){.ic-kapak-foto.ust-yasla{top:0;bottom:auto;height:76%;object-position:64% 0!important}.ic-kapak:has(.ust-yasla){background:#3A2418}}

/* ===== iç sayfa ritmi (revize: "Ocean Cleanup gibi ferah") — değişkenler styles.css sonunda =====
   Ardışık bölümler arasındaki üst boşluk sıfırlanıyordu (48–96px ile ayrılıyorlardı); artık her bölüm arası --ritim. */
main.ic > .bolum{padding-top:var(--ritim)!important;padding-bottom:0!important}
main.ic > .bolum:first-child{padding-top:calc(var(--ritim) * .6)!important}
main.ic > .bolum:last-child{padding-bottom:var(--ritim)!important}
.ic-baslik{margin-bottom:20px!important}
.ic-spot{line-height:1.6!important}
.ic-h3{margin-bottom:12px!important}
.ic-metin{line-height:1.75}