/* KP-HOME3 — hesap.com.tr'den olculen olculer.
   Kap 1320px · baslik 24/700 · radius 12px · urun karti 199x320 (mobil 159x297)
   platform karti 160x160 · butce karti 203x182 · oyun satiri 491x82 */
.kph3{--h3-card:#11141a;--h3-plat:#171a21;--h3-up:#161b22;--h3-line:rgba(255,255,255,.08);
  --h3-text:#f2f3f5;--h3-muted:#8b949e;--h3-accent:#ff7b1f;padding:28px 0}
.kph3-wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.kph3-title{font-size:24px;font-weight:700;color:var(--h3-text);margin:0 0 18px;letter-spacing:-.01em}

/* --- Populer Oyunlar: 2 sutun, satir 82px --- */
.kph3-gamegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kph3-game{display:flex;align-items:center;gap:14px;min-height:82px;padding:12px 16px;
  background:var(--h3-card);border:1px solid var(--h3-line);border-radius:12px;text-decoration:none;
  transition:background .18s,transform .18s}
.kph3-game:hover{background:var(--h3-up);transform:translateY(-2px)}
.kph3-game img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--h3-up)}
.kph3-game span{min-width:0}
.kph3-game b{display:block;font-size:15px;font-weight:600;color:var(--h3-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kph3-game small{display:block;font-size:12px;color:var(--h3-muted);margin-top:3px}

/* --- Platform / hediye karti: 160x160 --- */
.kph3-platgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.kph3-plat{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;background:var(--h3-plat);border:1px solid var(--h3-line);border-radius:12px;text-decoration:none;
  transition:background .18s,transform .18s}
.kph3-plat:hover{background:var(--h3-up);transform:translateY(-2px)}
.kph3-platimg{display:block;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#0d1016;flex:0 0 auto}
.kph3-platimg img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);transition:transform .25s ease}
.kph3-plat:hover .kph3-platimg img{transform:scale(1.22)}
.kph3-platname{font-size:13px;font-weight:700;color:var(--h3-text);text-align:center;line-height:1.25}
.kph3-platn{font-size:10.5px;color:var(--h3-muted)}

/* --- Urun rayi: kart 199x320 --- */
.kph3-rail{display:grid;grid-auto-flow:column;grid-auto-columns:199px;gap:16px;overflow-x:auto;
  padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.kph3-rail::-webkit-scrollbar{height:6px}
.kph3-rail::-webkit-scrollbar-thumb{background:var(--h3-up);border-radius:99px}
.kph3-card{scroll-snap-align:start;display:flex;flex-direction:column;height:320px;overflow:hidden;
  background:var(--h3-card);border:1px solid var(--h3-line);border-radius:12px;text-decoration:none;
  transition:transform .18s,border-color .18s}
.kph3-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.kph3-thumb{position:relative;display:block;height:150px;background:var(--h3-up);flex:0 0 auto}
.kph3-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kph3-off{position:absolute;top:8px;left:8px;font-style:normal;font-size:11px;font-weight:800;color:#fff;
  background:var(--h3-accent);border-radius:999px;padding:3px 9px}
.kph3-body{display:flex;flex-direction:column;gap:5px;padding:11px 12px 13px;flex:1;min-height:0}
.kph3-cat{font-size:11px;color:var(--h3-muted)}
.kph3-name{font-size:13px;font-weight:600;color:var(--h3-text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kph3-price{margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.kph3-price s{font-size:11.5px;color:var(--h3-muted)}
.kph3-price i{font-style:normal;font-size:15px;font-weight:800;color:var(--h3-accent)}
.kph3-seller{font-size:11px;color:var(--h3-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Butce dostu: kart 203x182 --- */
.kph3-cheapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.kph3-cheapcard{display:flex;flex-direction:column;align-items:center;gap:7px;height:182px;
  padding:20px 15px;background:var(--h3-card);border:1px solid var(--h3-line);border-radius:12px;
  text-decoration:none;text-align:center;transition:background .18s,transform .18s}
.kph3-cheapcard:hover{background:var(--h3-up);transform:translateY(-2px)}
.kph3-cheapcard img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--h3-up)}
.kph3-cheapcard b{font-size:13px;font-weight:600;color:var(--h3-text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kph3-cheapcard small{font-size:11px;color:var(--h3-muted)}
.kph3-cheapcard i{font-style:normal;font-size:15px;font-weight:800;color:var(--h3-accent);margin-top:auto}

/* --- mobil: referansta kart 159x297 --- */
@media (max-width:820px){
  .kph3{padding:20px 0}
  .kph3-title{font-size:19px;margin-bottom:14px}
  .kph3-gamegrid{grid-template-columns:1fr;gap:10px}
  .kph3-game{min-height:72px;padding:10px 13px;gap:11px}
  .kph3-game img{width:48px;height:48px}
  .kph3-platgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
  .kph3-plat{padding:12px;gap:8px}
  .kph3-plat img{width:44px;height:44px}
  .kph3-plat span{font-size:11px}
  .kph3-rail{grid-auto-columns:159px;gap:11px}
  .kph3-card{height:297px}
  .kph3-thumb{height:132px}
  .kph3-cheapgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kph3-cheapcard{height:168px;padding:16px 12px}
}
@media (prefers-reduced-motion:reduce){.kph3 *{transition:none!important}}

/* ---- hero: referansta 1296x500 banner slider ---- */
.kph3-hero{padding-top:22px;padding-bottom:30px}
/* KP-H1GIZLE: baslik ekranda gorunmuyor ama arama motorlari icin sayfada duruyor */
.kph3-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kph3-slider{position:relative;border-radius:12px;overflow:hidden;background:var(--h3-up);aspect-ratio:2.35/1}
.kph3-track{position:absolute;inset:0}
.kph3-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;display:block}
.kph3-slide.on{opacity:1}
.kph3-slide img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.kph3-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;cursor:pointer;
  border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.kph3-nav:hover{background:rgba(0,0,0,.7)}
.kph3-nav.l{left:14px}.kph3-nav.r{right:14px}
.kph3-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.kph3-dots button{width:22px;height:4px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer}
.kph3-dots button.on{background:var(--h3-accent);width:30px}

/* ---- sosyal medya: referansta oge 137x141 ---- */
.kph3-socgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.kph3-soc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:141px;
  padding:14px;background:var(--h3-card);border:1px solid var(--h3-line);border-radius:12px;text-decoration:none;text-align:center;
  transition:background .18s,transform .18s}
.kph3-soc:hover{background:var(--h3-up);transform:translateY(-2px)}
.kph3-soc img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.kph3-soc b{font-size:13px;font-weight:600;color:var(--h3-text)}
.kph3-soc small{font-size:11px;color:var(--h3-muted)}

/* ---- SEO metni ---- */
.kph3-seo p{color:var(--h3-muted);font-size:14px;line-height:1.75;margin:0 0 12px;max-width:95ch}
.kph3-seo p:last-child{margin-bottom:0}

/* ---- referansta olmayan eski bolumleri gizle ---- */
html.kp-home3 #kph2,
html.kp-home3 #kph2-rail-trend,
html.kp-home3 .kph2-trust{display:none!important}

@media (max-width:820px){
  .kph3-hero{padding-top:14px;padding-bottom:18px}
  .kph3-h1{font-size:24px;line-height:31px;margin-bottom:13px}
  /* mobilde yazi sigsin diye daha yuksek oran; gorseller 16:9 zaten */
  .kph3-slider{aspect-ratio:16/9}
  /* mobilde oklar basligin uzerine biniyordu; noktalar yeterli */
  .kph3-nav{display:none}
  .kph3-socgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .kph3-soc{height:118px;padding:10px}
  .kph3-soc img{width:38px;height:38px}
  .kph3-soc b{font-size:11.5px}
}

/* ---- hero slide uzerindeki yazi katmani ---- */
.kph3-slide{position:absolute;inset:0}
.kph3-slide::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,8,12,.88) 0%,rgba(6,8,12,.66) 38%,rgba(6,8,12,.06) 68%,rgba(6,8,12,0) 100%)}
.kph3-slidetext{position:absolute;left:clamp(20px,4.5%,60px);top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:56%}
.kph3-slidetext em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--h3-accent);border-radius:999px;padding:5px 13px}
.kph3-slidetext strong{font-size:clamp(22px,3.6vw,54px);line-height:1.04;font-weight:800;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.kph3-slidetext small{font-size:clamp(11px,1.15vw,16px);color:#d7dbe4;line-height:1.5;max-width:46ch;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.kph3-slidetext b{margin-top:4px;font-size:clamp(12px,1.05vw,15px);font-weight:800;color:#fff;
  background:var(--h3-accent);border-radius:999px;padding:10px 22px;box-shadow:0 8px 22px rgba(255,123,31,.32)}
.kph3-slide:hover .kph3-slidetext b{filter:brightness(1.08)}
@media (max-width:820px){
  .kph3-slidetext{max-width:74%;gap:5px;left:14px}
  .kph3-slidetext small{display:none}
  .kph3-slidetext strong{font-size:20px;line-height:1.1}
  .kph3-slidetext em{font-size:9px;padding:3px 9px}
  .kph3-slidetext b{padding:7px 14px}
  .kph3-slide::after{background:linear-gradient(90deg,rgba(6,8,12,.9) 0%,rgba(6,8,12,.6) 55%,rgba(6,8,12,.1) 100%)}
}

/* ================= KP-ULTRA: cila ================= */
/* 1) Eski temadan kalan renkli isik lekeleri koyu zeminde kirli duruyordu */
html.kp-home3 .o.o1{opacity:.13!important}
html.kp-home3 .o.o2{opacity:.07!important}
html.kp-home3 .o.o3{opacity:.06!important}

/* 2) Bolum basligi + 'Tumunu gor' */
.kph3-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.kph3-head .kph3-title{margin:0}
.kph3-all{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--h3-muted);text-decoration:none;
  border:1px solid var(--h3-line);border-radius:999px;padding:7px 16px;transition:color .18s,border-color .18s,background .18s}
.kph3-all::after{content:' →'}
.kph3-all:hover{color:#fff;border-color:var(--h3-accent);background:rgba(255,123,31,.12)}

/* 3) Basliga turuncu dikey cizgi: bolumler birbirinden ayrilsin */
.kph3-title{position:relative;padding-left:14px}
.kph3-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:70%;min-height:18px;border-radius:99px;background:linear-gradient(180deg,#ff9a3c,#ff6a1a)}
.kph3-hero .kph3-title::before{display:none}

/* 4) Bir atlamali bolumlerde hafif yukseltilmis zemin - ritim olussun */
.kph3-platforms,.kph3-social{background:#0d1016;border-top:1px solid var(--h3-line);border-bottom:1px solid var(--h3-line)}
.kph3-platforms,.kph3-social{padding-top:34px;padding-bottom:34px}

/* 5) Kart cilasi */
.kph3-game,.kph3-plat,.kph3-soc,.kph3-cheapcard,.kph3-card{will-change:transform}
.kph3-card .kph3-thumb img{transition:transform .35s ease}
.kph3-card:hover .kph3-thumb img{transform:scale(1.06)}
.kph3-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.45)}
.kph3-game:hover,.kph3-soc:hover,.kph3-cheapcard:hover,.kph3-plat:hover{border-color:rgba(255,123,31,.38)}
.kph3-price i{text-shadow:0 0 18px rgba(255,123,31,.25)}

/* 6) Ray kaydirma cubugu inceltildi, kenarlarda yumusama */
.kph3-rail{scrollbar-color:var(--h3-up) transparent}
.kph3-best .kph3-wrap{position:relative}

/* 7) SEO metni okunakli kutu icinde */
.kph3-seo .kph3-wrap{max-width:1320px}
.kph3-seo p{color:#9aa3ae}

@media (max-width:820px){
  .kph3-head{margin-bottom:12px;gap:10px}
  .kph3-all{font-size:11.5px;padding:5px 12px}
  .kph3-title{padding-left:11px}
  .kph3-platforms,.kph3-social{padding-top:24px;padding-bottom:24px}
}

/* KP-REVEALFIX: animasyon hic calismazsa bile icerik gorunur kalsin */
@media (prefers-reduced-motion:reduce){ .kpu-reveal{opacity:1!important;transform:none!important} }
.kph3.kpu-reveal{transition:opacity .45s ease,transform .45s ease}
