.pb{appearance:none;border:none;display:inline-flex;align-items:center;gap:0;height:50px;padding:0 24px;
  border-radius:9999px;font-family:"Outfit",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box;
  transition:transform .18s cubic-bezier(.22,1,.36,1),background-size .45s cubic-bezier(.22,1,.36,1),color .2s,box-shadow .2s}
.pb:active{transform:scale(.97)}
.pb-ok{width:0;height:17px;margin-left:0;opacity:0;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:width .3s,margin .3s,opacity .2s}
.pb-d3,.pb-t1,.pb-canli{background-color:#0A0A0A;color:#fff;background-image:linear-gradient(#FF5E4A,#FF5E4A);
  background-repeat:no-repeat;background-size:0% 100%}
.pb-d3:hover,.pb-t1:hover,.pb-canli:hover{background-size:100% 100%;color:#fff}
.pb-d3:hover .pb-ok,.pb-t1:hover .pb-ok,.pb-canli:hover .pb-ok{width:17px;margin-left:10px;opacity:1}
.pb-ikincil{background:transparent;color:#0A0A0A;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);padding:0 22px}
.pb-ikincil:hover{box-shadow:inset 0 0 0 1.5px #0A0A0A}
.pb[data-zemin="koyu"].pb-d3,.pb[data-zemin="koyu"].pb-t1,.pb[data-zemin="gok"].pb-d3,.pb[data-zemin="gok"].pb-t1{background-color:#fff;color:#0A0A0A}
.pb[data-zemin="koyu"].pb-d3:hover,.pb[data-zemin="koyu"].pb-t1:hover,.pb[data-zemin="gok"].pb-d3:hover,.pb[data-zemin="gok"].pb-t1:hover{color:#fff}
.pb[data-zemin="koyu"].pb-ikincil,.pb[data-zemin="gok"].pb-ikincil{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.pb[data-zemin="koyu"].pb-ikincil:hover,.pb[data-zemin="gok"].pb-ikincil:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* T1: avatarlar + durum noktası */
/* boyut ölçeği tek kural (kullanıcı: "küçültebilirsin ama padding'i bu kadar değişince garip duruyor"):
   T1'de avatar grubunun sol boşluğu üst-alt boşluğuna eşit, yan boşluklar yükseklikle orantılı.
   M 50px: avatar 30, kenar (50-30)/2 = 10 · S 44px: avatar 26, kenar 9 · L 58px: avatar 34, kenar 12 */
.pb-t1{padding:0 24px 0 10px}
.pb-av{position:relative;display:inline-flex;flex:none;margin-right:12px}
.pb-av i{font-style:normal;width:30px;height:30px;border-radius:9999px;display:grid;place-items:center;
  font-size:10px;font-weight:600;color:#fff;box-shadow:0 0 0 2px var(--pb-halka,#0A0A0A)}
.pb-av i+i{margin-left:-6px}
.pb-av b{position:absolute;right:-2px;bottom:-1px;width:10px;height:10px;border-radius:9999px;background:#9CA3AF;
  box-shadow:0 0 0 2px var(--pb-halka,#0A0A0A)}
.pb-av b.on{background:#22C55E}
.pb-av b.on::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#22C55E;animation:pb-nabiz 2s ease-out infinite}
@keyframes pb-nabiz{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* canlı: avatarsız, yalnız nabız atan yeşil nokta */
.pb-canli{padding:0 22px 0 18px}
.pb-nokta{position:relative;width:8px;height:8px;margin-right:10px;border-radius:9999px;background:#22C55E;flex:none}
.pb-nokta::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#22C55E;animation:pb-nabiz 2s ease-out infinite}
.pb.kucuk.pb-canli{padding-left:16px;padding-right:20px}
.pb-t1:hover{--pb-halka:#fff}
.pb[data-zemin="koyu"].pb-t1,.pb[data-zemin="gok"].pb-t1{--pb-halka:#fff}
.pb.buyuk{height:58px;font-size:16px;padding-left:28px;padding-right:28px}
.pb.buyuk.pb-ikincil{padding-left:26px;padding-right:26px}
.pb.buyuk.pb-t1{padding-left:12px}
.pb.buyuk .pb-av i{width:34px;height:34px;font-size:11px}
.pb.buyuk .pb-av{margin-right:14px}
.pb.kucuk{height:44px;font-size:14.5px;padding-left:21px;padding-right:21px}
.pb.kucuk.pb-ikincil{padding-left:19px;padding-right:19px}
.pb.kucuk.pb-t1{padding-left:9px}
.pb.kucuk .pb-av i{width:26px;height:26px;font-size:9.5px}
.pb.kucuk .pb-av{margin-right:11px}
/* çizgi bağlantı: zemin yok, alt çizgi yazının üçte biri kadar başlar, üstüne gelince tamamlanır */
.pb-cizgi{position:relative;height:auto;min-height:40px;padding:0 2px;gap:8px;border-radius:0;background:none;color:#0A0A0A}
.pb-cizgi::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:currentColor;
  transform-origin:left;transform:scaleX(.32);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.pb-cizgi:hover::after{transform:scaleX(1)}
.pb-capraz{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pb-cizgi:hover .pb-capraz{transform:translate(3px,-3px)}
.pb-cizgi[data-renk="mercan"]{color:#FF5E4A}
.pb[data-zemin="koyu"].pb-cizgi,.pb[data-zemin="gok"].pb-cizgi{color:#fff}
@media(prefers-reduced-motion:reduce){.pb,.pb-ok,.pb-av b.on::after,.pb-nokta::after{transition:none;animation:none}}
.fo-sosyal{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 0 -12px;padding:0;list-style:none}
.fo-sosyal a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9999px;
  color:rgba(255,255,255,.82);transition:color .2s,background-color .2s}
.fo-sosyal a:hover{color:#FF5E4A;background-color:rgba(255,255,255,.08)}
.fo-sosyal svg{display:block;width:19px;height:19px;fill:currentColor}
.fo-kopyala{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;
  border-radius:9999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);font:500 13.5px "Outfit",sans-serif;white-space:nowrap;
  transition:background-color .2s,color .2s}
.fo-kopyala:hover{background:rgba(255,255,255,.16);color:#fff}
.fo-kopyala svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fo-kopyala[data-tamam="1"]{color:#fff;background:rgba(34,197,94,.22)}
.fo-kopyala.yalniz{width:44px;padding:0;justify-content:center}
.fo-basa{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 14px;
  border-radius:9999px;background:transparent;color:rgba(255,255,255,.82);font:500 14px "Outfit",sans-serif;transition:color .2s}
.fo-basa i{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9999px;background:rgba(255,255,255,.1);
  transition:background-color .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.fo-basa:hover{color:#fff}
.fo-basa:hover i{background:#FF5E4A;transform:translateY(-2px)}
.fo-basa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fo-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fo-telif{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.fo-telif a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.fo-telif a:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.fo-sosyal a,.fo-kopyala,.fo-basa,.fo-basa i{transition:none}}
.afo{position:relative;z-index:1;font-family:"Outfit",sans-serif;color:#fff;-webkit-font-smoothing:antialiased;
  background:linear-gradient(to bottom,var(--afo-ust,#501D08),#29110A);padding-top:clamp(52px,5vw,68px)}
.afo *{box-sizing:border-box}
.afo[data-mod="duz"]::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 120px);mask-image:linear-gradient(to bottom,transparent,#000 120px)}
.afo[data-mod="cam"]{background:none;--R:clamp(230px,22vw,330px);--E:clamp(80px,8vw,130px);--L:calc(var(--R) + var(--E));
  --F:min(160px,calc(var(--R) * .5));margin-top:calc(-1 * var(--R));padding-top:calc(var(--L) + clamp(8px,1.2vw,18px))}
.afo-cam{position:absolute;inset:0;pointer-events:none}
/* düz çimen kapanışın kenarından --F yukarıda başlar, saydamlığı smoothstep ile açılır: sahnenin dokusu kenara varmadan bu renge
   söner, kenarda doku çizgisi kalmaz. */
.afo-cimen{position:absolute;left:0;right:0;top:calc(var(--R) - var(--F));bottom:0;background:linear-gradient(to bottom,
  rgba(245,74,4,0) 0,rgba(245,74,4,.16) calc(var(--F) * .25),rgba(245,74,4,.5) calc(var(--F) * .5),rgba(245,74,4,.84) calc(var(--F) * .75),
  #F54A04 var(--F),#E23C06 100%)}
.afo-ton{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,0) 0,
  rgba(10,10,10,.022) calc(var(--L) * .1),rgba(10,10,10,.082) calc(var(--L) * .2),rgba(10,10,10,.169) calc(var(--L) * .3),
  rgba(10,10,10,.27) calc(var(--L) * .4),rgba(10,10,10,.377) calc(var(--L) * .5),rgba(10,10,10,.479) calc(var(--L) * .6),
  rgba(10,10,10,.568) calc(var(--L) * .7),rgba(10,10,10,.638) calc(var(--L) * .8),rgba(10,10,10,.684) calc(var(--L) * .9),
  rgba(10,10,10,.7) var(--L),rgba(10,10,10,.76) calc(var(--L) + 160px),rgba(10,10,10,.86) 100%)}
.afo-sar{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
/* içerik (lab/footer A2): üst satır logo + eylemler, dört sütun, alt satır telif + başa dön */
.afo-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 32px}
.afo-logo{display:inline-flex;align-items:center;min-height:44px;color:#fff;border-radius:8px}
.afo-logo svg{display:block;width:auto;height:32px}
.afo-eylem{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.afo-eposta{display:inline-flex;align-items:center;gap:4px}
.afo-eposta a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;color:rgba(255,255,255,.93);
  text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:4px}
.afo-eposta a:hover{color:#fff;text-decoration-line:underline}
.afo-kollar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;margin-top:clamp(48px,5vw,72px)}
.afo-kb{display:block;font-size:14px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.72)}
.afo-kol ul{list-style:none;margin:10px 0 0;padding:0}
.afo-kol a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;font-weight:500;color:rgba(255,255,255,.93);
  text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s}
.afo-kol a:hover{color:#fff;text-decoration-line:underline}
.afo-kol .fo-sosyal{margin:4px 0 0 -12px}
.afo-alt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(20px,2.6vw,36px)}
.afo-alt .fo-basa{margin-right:-6px}
.afo a:focus-visible,.afo button:focus-visible{outline:2px solid #4895F7;outline-offset:3px;border-radius:6px}
/* dokunmatik ekranda (tablet dahil) bağlantılar 44 px yükseklikte */
@media(pointer:coarse){.afo-kol a{min-height:44px}}
/* tablet ve telefon: üç bağlantı sütunu, sosyal ikonlar altta tek satır */
@media(max-width:1023px){
  .afo-kollar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .afo-kol.sos{grid-column:1 / -1;display:flex;align-items:center;gap:16px}
  .afo-kol.sos .fo-sosyal{margin:0;gap:0}
}
/* kısa: anasayfa Cta'sında karakter sahnenin altına kadar iniyor; cam yalnız çimeni ve ayakkabıları buzlar, ton kenarın altında sürer */
.afo[data-mod="cam"][data-sahne="kisa"]{--R:clamp(150px,13vw,200px);--E:clamp(150px,14vw,210px)}
@media(max-width:767px){
  /* 28 Eyl (mobil denetim m-kapanis): camın boş bandı telefonda yarıya (R camOlcu'da; E 80 → 40, kısa 150 → 75) */
  .afo[data-mod="cam"]{--R:clamp(80px,23vw,100px);--E:40px;padding-top:calc(var(--L) + 10px)}
  .afo[data-mod="cam"][data-sahne="kisa"]{--R:56px;--E:75px}
}
@media(max-width:640px){
  .afo-sar{padding:0 20px}
  .afo-cta{display:block}
  .afo-logo svg{height:28px}
  .afo-eylem{margin-top:16px}
  /* telefonda da üç dar sütun (en uzun satır "Sosyal medya"): iki sütuna göre kısa */
  .afo-kollar{gap:20px 12px;margin-top:32px}
  .afo-kol ul{margin-top:2px}
  .afo-kol a{min-height:44px}
  .afo-alt{margin-top:16px}
}
@media(max-width:374px){.afo-kol a{font-size:14.5px}}
