/* =====================================================================
   HanHosting urun sayfasi (yeni tasarim, Kasim 2026)
   partials/urun-hero.tpl · components/urun-yazilim.tpl · components/urun-rehberler.tpl
   + category.tpl "Her sunucuda" (hh-uincl) ve category-guide.tpl cizimi (hh-catx-art).
   Renkler temanin degiskenlerinden gelir (--hh-primary = Ultraviyole #6B2BFF).
   Cizimler assets/images/urun/*-acik.svg / *-koyu.svg.
   ===================================================================== */

/* ---- ust alan ---- */
.hh-uhero{position:relative;isolation:isolate;overflow:hidden;background:var(--hh-ink,#060E1C);color:var(--hh-ink-muted,#8F9DB5);
  padding-block:clamp(1.75rem,1.2rem + 1.5vw,2.5rem) clamp(3rem,2rem + 3vw,5rem)}
.hh-uhero-glow{position:absolute;inset:-25% -10% auto;block-size:130%;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 40% at 76% 46%,rgba(var(--hh-primary-rgb),.32),transparent 70%),
             radial-gradient(26% 30% at 12% 18%,rgba(var(--hh-primary-rgb),.14),transparent 70%)}
.hh-uhero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(214,226,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(214,226,245,.06) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%)}
.hh-uhero [hidden]{display:none!important}
.hh-uhero-crumb .breadcrumb-item,.hh-uhero-crumb .breadcrumb-item a,.hh-uhero-crumb .breadcrumb-item:before{color:var(--hh-ink-muted,#8F9DB5)}
.hh-uhero-crumb .breadcrumb-item a:hover,.hh-uhero-crumb .breadcrumb-item.active{color:var(--hh-ink-text,#EDF2FA)}
.hh-uhero-in{display:grid;gap:2rem;align-items:center;margin-block-start:clamp(1.25rem,1rem + 1vw,2rem)}
@media (min-width:992px){.hh-uhero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}}
.hh-uhero-tag{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(var(--hh-primary-rgb),.45);
  background:rgba(var(--hh-primary-rgb),.12);color:var(--hh-ink-text,#EDF2FA);font-size:.8rem;font-weight:600;letter-spacing:.02em}
.hh-uhero-tag i{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hh-accent,#A07CFF);box-shadow:0 0 0 4px rgba(var(--hh-primary-rgb),.25)}
.hh-uhero-title{color:var(--hh-ink-text,#EDF2FA);font-weight:800;font-size:clamp(2.2rem,1.2rem + 3.6vw,4.1rem);line-height:1.02;letter-spacing:-.035em;margin:1rem 0 1rem;text-wrap:balance}
.hh-uhero-lead{font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.65;max-inline-size:38rem;margin:0;color:var(--hh-ink-muted,#8F9DB5)}
.hh-uhero-specs{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (max-width:575.98px){.hh-uhero-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hh-uhero-specs li{display:flex;flex-direction:column;gap:.35rem;padding:.85rem .95rem;border-radius:.9rem;border:1px solid var(--hh-ink-line,rgba(214,226,245,.08));
  background:rgba(255,255,255,.03)}
.hh-uhero-specs span{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--hh-ink-muted,#8F9DB5)}
.hh-uhero-specs span i{color:var(--hh-accent,#A07CFF);font-size:1rem}
.hh-uhero-specs b{color:var(--hh-ink-text,#EDF2FA);font-weight:800;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.hh-uhero-specs small{font-size:.6em;font-weight:600;color:var(--hh-ink-muted,#8F9DB5);margin-inline-start:.25rem}
.hh-uhero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem;margin-block-start:1.75rem}
.hh-uhero-from{display:flex;flex-direction:column;margin-inline-end:.75rem}
.hh-uhero-from span{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-ink-muted,#8F9DB5)}
.hh-uhero-from b{color:var(--hh-ink-text,#EDF2FA);font-weight:800;font-size:1.75rem;letter-spacing:-.025em;line-height:1.1}
.hh-uhero-from small{font-size:.55em;font-weight:600;color:var(--hh-ink-muted,#8F9DB5);margin-inline-start:.2rem}
.hh-uhero-cta .btn-primary{display:inline-flex;align-items:center;gap:.35rem;box-shadow:0 16px 36px -16px rgba(var(--hh-primary-rgb),.9)}
.hh-uhero-ghost{color:var(--hh-ink-text,#EDF2FA);border:1px solid var(--hh-ink-line-2,rgba(214,226,245,.16))}
.hh-uhero-ghost:hover,.hh-uhero-ghost:focus-visible{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.hh-uhero-trust{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.9rem}
.hh-uhero-trust li{display:inline-flex;align-items:center;gap:.45rem}
.hh-uhero-trust i{color:var(--hh-accent,#A07CFF)}
.hh-uhero-art{display:grid;place-items:center}
.hh-uhero-art img{inline-size:100%;max-inline-size:34rem;block-size:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
@media (max-width:991.98px){.hh-uhero-art img{max-inline-size:20rem}}

/* koyu tema: Ultraviyole (#6B2BFF) koyu zeminde okunmaz, acik tonu (#A07CFF) */
[data-bs-theme=dark] .hh-usoft-tag,[data-bs-theme=dark] .hh-uguide-tag,[data-bs-theme=dark] .hh-uguide-more,[data-bs-theme=dark] .hh-usoft-ico{color:var(--hh-accent,#A07CFF)}
[data-bs-theme=dark] .hh-usoft-tag,[data-bs-theme=dark] .hh-usoft-ico{background:rgba(160,124,255,.14)}

/* acik zemin cizimleri: koyu temada ayni cizimin koyu surumu (gizli olan lazy gorsel indirilmez) */
.hh-art-d{display:none!important}
[data-bs-theme=dark] .hh-art-l{display:none!important}
[data-bs-theme=dark] .hh-art-d{display:block!important}

/* ---- paket alani: mobilde aile sekmeleri kesik gorunmesin, cok paketli listede 4'lu izgara ---- */
#paketler{scroll-margin-top:90px}
@media (min-width:1200px){.hh-pgrid[data-cards="8"],.hh-pgrid[data-cards="9"],.hh-pgrid[data-cards="10"],.hh-pgrid[data-cards="11"],.hh-pgrid[data-cards="12"],
  .hh-pgrid[data-cards="13"],.hh-pgrid[data-cards="14"],.hh-pgrid[data-cards="15"],.hh-pgrid[data-cards="16"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767.98px){
  .hh-plan-bar .hh-seg[role=tablist]{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-inline-end:2rem}
  .hh-float{scale:.86;transform-origin:100% 100%}
}

/* ---- her sunucuda (koyu) ---- */
.hh-uincl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:991.98px){.hh-uincl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.hh-uincl-grid{grid-template-columns:minmax(0,1fr)}}
.hh-uincl-card{display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.15rem 1.35rem;border-radius:1.1rem;border:1px solid var(--hh-ink-line,rgba(214,226,245,.08));
  background:linear-gradient(180deg,rgba(var(--hh-primary-rgb),.08),rgba(255,255,255,.015));transition:border-color .2s,translate .2s}
.hh-uincl-card:hover{border-color:rgba(var(--hh-primary-rgb),.5);translate:0 -2px}
.hh-uincl-art{display:block;block-size:9.5rem;margin-block-end:.5rem;overflow:hidden}
.hh-uincl-art img{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.hh-uincl-icon{display:grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:.8rem;background:rgba(var(--hh-primary-rgb),.18);color:var(--hh-accent,#A07CFF);font-size:1.3rem;margin-block-end:.5rem}
.hh-uincl-card h3{color:var(--hh-ink-text,#EDF2FA);font-size:1.08rem;font-weight:700;margin:0}
.hh-uincl-card p{margin:0;font-size:.93rem;line-height:1.55;color:var(--hh-ink-muted,#8F9DB5)}
@media (max-width:575.98px){.hh-uincl-card{flex-direction:row;flex-wrap:wrap;align-items:center}.hh-uincl-art{flex:0 0 6.5rem;block-size:5.5rem;margin:0}.hh-uincl-card h3{flex:1 1 9rem}.hh-uincl-card p{flex:1 1 100%}}

/* ---- yazilim ve altyapi ---- */
.hh-usoft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (min-width:1200px){.hh-usoft-grid[data-cards="4"],.hh-usoft-grid[data-cards="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:991.98px){.hh-usoft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.hh-usoft-grid{grid-template-columns:minmax(0,1fr)}}
.hh-usoft-card{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.25rem;border-radius:1.1rem;background:var(--hh-surface-bg,#fff);
  border:1px solid var(--hh-border-color,#DCE7F5);transition:border-color .2s,box-shadow .2s,translate .2s}
.hh-usoft-card:hover{border-color:rgba(var(--hh-primary-rgb),.45);box-shadow:0 22px 44px -30px rgba(var(--hh-primary-rgb),.55);translate:0 -2px}
.hh-usoft-logo{display:flex;align-items:center;block-size:2.75rem;margin-block-end:.35rem}
.hh-usoft-logo img{max-block-size:100%;max-inline-size:9rem;inline-size:auto;block-size:auto;object-fit:contain}
.hh-usoft-ico{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:.75rem;background:rgba(var(--hh-primary-rgb),.1);color:var(--hh-primary);font-size:1.35rem}
.hh-usoft-card h3{font-size:1.05rem;font-weight:800;color:var(--hh-heading-color);margin:0}
.hh-usoft-card p{margin:0;font-size:.92rem;line-height:1.55;color:var(--hh-muted-color)}
.hh-usoft-tag{align-self:flex-start;margin-block-start:auto;font-size:.75rem;font-weight:700;padding:.25rem .55rem;border-radius:.4rem;
  background:rgba(var(--hh-primary-rgb),.08);color:var(--hh-primary)}
[data-bs-theme=dark] .hh-usoft-logo img{background:#fff;border-radius:.5rem;padding:.3rem .45rem}

/* ---- urun rehberi cizimi ---- */
.hh-catx-intro{display:grid;gap:1.5rem;align-items:center;margin-block-end:clamp(2rem,1.5rem + 2vw,3.5rem)}
.hh-catx-intro .hh-head{display:block;margin:0}
.hh-catx-intro .hh-head .hh-title{margin-block:1rem}
@media (min-width:992px){.hh-catx-intro{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3rem}}
.hh-catx-art{margin:0;display:grid;place-items:center;padding:1.25rem;border-radius:1.5rem;background:var(--hh-surface-bg,#fff);border:1px solid var(--hh-border-color,#DCE7F5)}
.hh-catx-art img{inline-size:100%;max-inline-size:28rem;block-size:auto}

/* ---- rehberler (sayfanin en alti) ---- */
.hh-uguides{background:var(--hh-paper,#F4F6FA)}
.hh-uguides-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem}
.hh-uguides-head>div{max-inline-size:42rem}
.hh-uguides-head .hh-title{margin:1rem 0 .75rem}
.hh-uguides-head .hh-lead{margin:0}
.hh-uguides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:991.98px){.hh-uguides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.hh-uguides-grid{grid-template-columns:minmax(0,1fr)}}
.hh-uguide{display:flex;flex-direction:column;border-radius:1.15rem;overflow:hidden;background:var(--hh-surface-bg,#fff);border:1px solid var(--hh-border-color,#DCE7F5);
  text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,translate .2s}
.hh-uguide:hover,.hh-uguide:focus-visible{border-color:rgba(var(--hh-primary-rgb),.45);box-shadow:0 24px 48px -32px rgba(var(--hh-primary-rgb),.6);translate:0 -3px;color:inherit}
.hh-uguide-art{display:block;block-size:9.5rem;padding:.75rem;overflow:hidden;background:linear-gradient(160deg,rgba(var(--hh-primary-rgb),.08),rgba(var(--hh-primary-rgb),.02))}
.hh-uguide-art img{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.hh-uguide-body{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.15rem 1.2rem;flex:1}
.hh-uguide-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--hh-primary)}
.hh-uguide-body strong{font-size:1.05rem;font-weight:800;line-height:1.3;color:var(--hh-heading-color)}
.hh-uguide-text{font-size:.9rem;line-height:1.55;color:var(--hh-muted-color)}
.hh-uguide-more{margin-block-start:auto;padding-block-start:.5rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:700;color:var(--hh-primary)}
.hh-uguide:hover .hh-uguide-more i{translate:3px 0}
.hh-uguide-more i{transition:translate .2s}
@media (prefers-reduced-motion:reduce){.hh-uincl-card,.hh-usoft-card,.hh-uguide,.hh-uguide-more i{transition:none}.hh-uincl-card:hover,.hh-usoft-card:hover,.hh-uguide:hover{translate:none}}

/* ==== Detayli paket karti (components/plan-kart-detay.tpl), anasayfa 02 Sunucular ve urun sayfalari (components/urun-paketler.tpl). ==== */
/* ---- detayli paket karti (components/plan-kart-detay.tpl) ---- */
.hh-pk{position:relative;display:flex;flex-direction:column;flex:1;min-inline-size:0;overflow:hidden;border-radius:1.2rem;background:var(--hh-surface-bg,#fff);
  border:1px solid var(--hh-border-color,#DCE7F5);transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.hh-pk:hover{border-color:rgba(var(--hh-primary-rgb),.4);box-shadow:0 30px 60px -38px rgba(var(--hh-primary-rgb),.6);transform:translateY(-3px)}
.hh-pk.is-popular{border:1.5px solid transparent;background:linear-gradient(var(--hh-surface-bg,#fff),var(--hh-surface-bg,#fff)) padding-box,linear-gradient(140deg,#6B2BFF,#C9B5FF 50%,#6B2BFF) border-box;
  box-shadow:0 30px 60px -36px rgba(var(--hh-primary-rgb),.65)}
.hh-pk.is-soldout{opacity:.7}
.hh-pk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem .75rem;padding:1.05rem 1.2rem .85rem}
.hh-pk-id{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;min-block-size:1.2rem}
.hh-pk-no{font-family:var(--hh-mono);font-size:.74rem;color:var(--hh-muted-color)}
.hh-pk-title{margin:0;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--hh-heading-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-pk-title .hh-pk-code{display:block;margin-top:.15rem;font-size:.72rem;font-weight:600;letter-spacing:.03em;opacity:.62}
/* Paket listesi alti guven satiri (components/urun-guven.tpl, 6 Kas 2026) */
.hh-ug{list-style:none;margin:1.1rem 0 0;padding:.75rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;justify-content:center;border:1px solid var(--hh-border-color,rgba(127,120,170,.22));border-radius:.9rem;font-size:.86rem;color:var(--hh-muted-color,inherit)}
.hh-ug li{display:inline-flex;align-items:center;gap:.4rem}
.hh-ug li>i{color:var(--hh-primary,#6B2BFF);font-size:1rem}
.hh-ug a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hh-ug-tp a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.hh-ug-tp b{color:var(--hh-heading-color,inherit)}
.hh-ug-stars{display:inline-flex;gap:1px;color:#00b67a}
@media (max-width:575.98px){.hh-ug{justify-content:flex-start;gap:.45rem 1rem}}
.hh-pk-logo img{display:block;block-size:1.5rem;inline-size:auto;max-inline-size:5rem;object-fit:contain}
.hh-pk-price{position:relative;padding:.8rem 1.2rem .85rem;background:var(--hh-paper,#F4F6FA);border-block:1px solid var(--hh-border-color,#DCE7F5)}
.hh-pk-gift{position:absolute;inset-block-start:50%;inset-inline-end:1rem;translate:0 -50%;display:flex;align-items:center;gap:.45rem;max-inline-size:52%;padding:.35rem .6rem .35rem .45rem;
  border-radius:.65rem;font-size:.7rem;line-height:1.25;text-align:start;background:var(--hh-surface-bg,#fff);border:1px solid rgba(var(--hh-primary-rgb),.22);
  box-shadow:0 8px 18px -12px rgba(var(--hh-primary-rgb),.6)}
.hh-pk-gift>i{flex:0 0 auto;display:grid;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:.45rem;background:linear-gradient(135deg,#7B47FF,#5517E6);color:#fff;font-size:.78rem;
  animation:pk-gift 3.6s ease-in-out infinite}
.hh-pk-gift>span{display:flex;flex-direction:column;min-inline-size:0}
.hh-pk-gift b{font-weight:800;color:var(--hh-heading-color);white-space:nowrap}
.hh-pk-gift small{color:var(--hh-muted-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 7 Kas 2026: dar kartta (fiyat bandi < 27rem; 1440 px'te 4'lu dizilimde 300 px) hediye etiketi fiyatin ustune biniyordu -> bandin
   kendi genisligine gore etiket fiyatin ustunde kendi satirina iner; genis bantta eskisi gibi sagda kalir. */
.hh-pk-price{container-type:inline-size}
@container (max-width:27rem){.hh-pk-price>.hh-pk-gift{position:static;translate:none;inline-size:fit-content;max-inline-size:100%;margin-block-end:.55rem}}
@keyframes pk-gift{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.hh-pk-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}
.hh-pk-amount strong{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--hh-heading-color)}
.hh-pk-suffix{font-size:.85rem;color:var(--hh-muted-color)}
/* kaynak olcekleri: cubuk ailenin en buyuk degerine gore dolar */
.hh-pk-meters{display:grid;gap:.8rem;margin:0;padding:1rem 1.2rem .35rem;list-style:none}
.hh-pk-meters li{display:grid;grid-template-columns:1.9rem auto minmax(0,1fr);align-items:center;gap:.3rem .6rem}
.hh-pk-meters li>i{grid-row:1/3;display:grid;place-items:center;inline-size:1.9rem;block-size:1.9rem;border-radius:.55rem;background:rgba(var(--hh-primary-rgb),.1);color:var(--hh-primary);font-size:.95rem}
.hh-pk-meters li>b{font-size:.98rem;font-weight:800;color:var(--hh-heading-color);white-space:nowrap}
.hh-pk-meters li>span{overflow:hidden;font-size:.76rem;color:var(--hh-muted-color);white-space:nowrap;text-overflow:ellipsis}
.hh-pk-bar{grid-column:2/-1;display:block;block-size:.32rem;overflow:hidden;border-radius:1rem;background:rgba(var(--hh-primary-rgb),.1)}
.hh-pk-bar i{display:block;inline-size:var(--p,50%);block-size:100%;border-radius:inherit;background:linear-gradient(90deg,#A07CFF,var(--hh-primary));transform-origin:left;
  animation:pk-bar 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.2s + var(--i,0) * .1s)}
@keyframes pk-bar{from{transform:scaleX(0)}}
.hh-pk-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin:0;padding:.55rem 1.2rem 0;list-style:none}
.hh-pk-info li{display:flex;align-items:center;gap:.45rem;min-inline-size:0;padding:.42rem .55rem;border-radius:.6rem;background:var(--hh-paper,#F4F6FA);font-size:.75rem;color:var(--hh-muted-color)}
.hh-pk-info li>i{color:var(--hh-primary)}
.hh-pk-info li>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hh-pk-info b{margin-inline-end:.3rem;font-weight:800;color:var(--hh-heading-color)}
.hh-pk-os{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:.85rem 1.2rem 0;padding-block-start:.8rem;border-block-start:1px dashed var(--hh-border-color,#DCE7F5)}
.hh-pk-os-l{font-size:.74rem;font-weight:700;color:var(--hh-muted-color)}
.hh-pk-os-list{display:flex;gap:.3rem}
.hh-pk-os-i{display:grid;place-items:center;inline-size:1.9rem;block-size:1.9rem;border-radius:.5rem;background:var(--hh-surface-bg,#fff);border:1px solid var(--hh-border-color,#DCE7F5);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hh-pk-os-i img{inline-size:1.15rem;block-size:1.15rem;object-fit:contain}
.hh-pk:hover .hh-pk-os-i{transform:translateY(-3px)}
.hh-pk:hover .hh-pk-os-i:nth-child(2){transition-delay:.05s}.hh-pk:hover .hh-pk-os-i:nth-child(3){transition-delay:.1s}.hh-pk:hover .hh-pk-os-i:nth-child(4){transition-delay:.15s}
.hh-pk-os-txt{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--hh-heading-color)}
.hh-pk-os-txt i{color:var(--hh-primary)}
.hh-pk-feat{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.75rem 0 0;padding:0 1.2rem;list-style:none;font-size:.77rem;color:var(--hh-muted-color)}
.hh-pk-feat li{display:inline-flex;align-items:center;gap:.35rem}
.hh-pk-feat i{color:var(--hh-primary)}
.hh-pk-foot{display:grid;gap:.4rem;margin-block-start:auto;padding:1rem 1.2rem .9rem}
.hh-pk-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;inline-size:100%}
[data-bs-theme=dark] .hh-pk-meters li>i,[data-bs-theme=dark] .hh-pk-gift>i,[data-bs-theme=dark] .hh-pk-info li>i,[data-bs-theme=dark] .hh-pk-os-txt i,[data-bs-theme=dark] .hh-pk-feat i{color:var(--hh-accent,#A07CFF)}
[data-bs-theme=dark] .hh-pk.is-popular{background:linear-gradient(var(--hh-surface-bg),var(--hh-surface-bg)) padding-box,linear-gradient(140deg,#6B2BFF,#A07CFF 50%,#6B2BFF) border-box}
@media (prefers-reduced-motion:reduce){.hh-pk-bar i,.hh-pk-gift>i{animation:none}.hh-pk,.hh-pk-os-i{transition:none}}

/* ==== Tanitim sayfalari (components/page/landing.tpl), yeni tasarim Kasim 2026: .hh-ulp-* ====
   Ust alan kategori sayfalariyla ortak (.hh-uhero); urunun vurgu rengi --lp-glow ("r,g,b", sayfa dosyasindan). */
.hh-ulp-hero .hh-uhero-glow{background:radial-gradient(34% 42% at 76% 46%,rgba(var(--lp-glow),.34),transparent 70%),radial-gradient(26% 30% at 12% 18%,rgba(var(--hh-primary-rgb),.16),transparent 70%)}
.hh-ulp-tag img{flex:0 0 auto;inline-size:1.15rem;block-size:1.15rem;object-fit:contain;border-radius:.25rem}
.hh-ulp-accent{background:linear-gradient(90deg,#D9CCFF,#A07CFF 45%,rgb(var(--lp-glow)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hh-ulp-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1.6rem 0 0;padding:0;list-style:none}
.hh-ulp-feats li{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem .9rem;border:1px solid var(--hh-ink-line,rgba(214,226,245,.08));border-radius:.9rem;background:rgba(255,255,255,.025)}
.hh-ulp-feats li>i{flex:0 0 auto;display:grid;place-items:center;inline-size:2.1rem;block-size:2.1rem;border-radius:.6rem;background:rgba(var(--lp-glow),.18);color:#fff;font-size:1rem;
  box-shadow:inset 0 0 0 1px rgba(var(--lp-glow),.38)}
.hh-ulp-feats span{display:flex;flex-direction:column;min-inline-size:0;line-height:1.35}
.hh-ulp-feats b{font-size:.9rem;font-weight:700;color:var(--hh-ink-text,#EDF2FA)}
.hh-ulp-feats small{font-size:.76rem;color:var(--hh-ink-muted,#8F9DB5)}
/* sag taraf: oyun kapagi, urun cizimi, afis ya da yatay gorsel */
.hh-ulp-art{position:relative;min-block-size:18rem}
.hh-ulp-art .hh-ulp-svg{inline-size:100%;max-inline-size:34rem}
.hh-ulp-cover{position:relative;isolation:isolate;overflow:hidden;inline-size:min(100%,21rem);aspect-ratio:2/3;border-radius:1.4rem;
  box-shadow:0 50px 90px -40px rgba(var(--lp-glow),.8),0 0 0 1px rgba(255,255,255,.1);transform:perspective(900px) rotateY(-9deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hh-ulp-cover:hover{transform:perspective(900px) rotateY(0) rotateX(0)}
.hh-ulp-art .hh-ulp-cover-img{position:absolute;inset:0;inline-size:100%;max-inline-size:none;block-size:100%;object-fit:cover;filter:none}
.hh-ulp-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,5,26,.88)),radial-gradient(80% 45% at 50% 100%,rgba(var(--lp-glow),.4),transparent 70%)}
.hh-ulp-art .hh-ulp-cover-logo{position:absolute;inset-inline:1.25rem auto;inset-block-end:1.4rem;inline-size:auto;max-inline-size:70%;max-block-size:3.2rem;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.65))}
.hh-ulp-cover-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-100%);animation:ulp-shine 7s ease-in-out infinite}
@keyframes ulp-shine{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hh-ulp-poster{inline-size:min(100%,24rem);overflow:hidden;border-radius:1.4rem;box-shadow:0 50px 90px -40px rgba(var(--lp-glow),.8),0 0 0 1px rgba(255,255,255,.1)}
.hh-ulp-art .hh-ulp-poster img{display:block;inline-size:100%;max-inline-size:none;filter:none}
.hh-ulp-banner{overflow:hidden;border-radius:1.4rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.hh-ulp-art .hh-ulp-banner img{display:block;inline-size:100%;max-inline-size:none;filter:none}
.hh-ulp-chips{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.hh-ulp-chips li{position:absolute;padding:.42rem .8rem;border:1px solid rgba(var(--lp-glow),.5);border-radius:999px;background:rgba(12,8,38,.8);color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 24px -12px rgba(0,0,0,.85);animation:ulp-float 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -2s)}
.hh-ulp-chips li:nth-child(1){inset-block-start:10%;inset-inline-start:0}
.hh-ulp-chips li:nth-child(2){inset-block-start:46%;inset-inline-end:0}
.hh-ulp-chips li:nth-child(3){inset-block-end:8%;inset-inline-start:6%}
.hh-ulp-chips li:nth-child(n+4){display:none}
@keyframes ulp-float{50%{transform:translateY(-8px)}}

/* paketler: notlar, teklif kartlari, bos kutu */
.hh-ulp-notes{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.hh-ulp-notes li{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:1px solid rgba(var(--hh-primary-rgb),.18);border-radius:999px;background:rgba(var(--hh-primary-rgb),.07);
  font-size:.8rem;font-weight:600;color:var(--hh-heading-color)}
.hh-ulp-notes i{color:var(--hh-primary)}
.hh-ulp-offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:1rem}
.hh-ulp-offer{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hh-border-color,#DCE7F5);border-radius:1.2rem;background:var(--hh-surface-bg,#fff);
  transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.hh-ulp-offer:hover{transform:translateY(-3px);border-color:rgba(var(--hh-primary-rgb),.4);box-shadow:0 30px 60px -38px rgba(var(--hh-primary-rgb),.6)}
.hh-ulp-offer.is-popular{border:1.5px solid transparent;background:linear-gradient(var(--hh-surface-bg,#fff),var(--hh-surface-bg,#fff)) padding-box,linear-gradient(140deg,#6B2BFF,#C9B5FF 50%,#6B2BFF) border-box;
  box-shadow:0 30px 60px -36px rgba(var(--hh-primary-rgb),.65)}
.hh-ulp-offer header{padding:1.1rem 1.2rem .9rem}
.hh-ulp-offer-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.hh-ulp-offer-no{font-family:var(--hh-mono);font-size:.74rem;color:var(--hh-muted-color)}
.hh-ulp-offer-label{padding:.15rem .55rem;border-radius:999px;background:rgba(var(--hh-primary-rgb),.1);color:var(--hh-primary);font-size:.7rem;font-weight:700}
.hh-ulp-offer h3{margin:.5rem 0 .3rem;font-size:1.1rem;font-weight:800;letter-spacing:-.01em;color:var(--hh-heading-color)}
.hh-ulp-offer header p{margin:0;font-size:.85rem;line-height:1.55;color:var(--hh-muted-color)}
.hh-ulp-offer-price{padding:.8rem 1.2rem;border-block:1px solid var(--hh-border-color,#DCE7F5);background:var(--hh-paper,#F4F6FA)}
.hh-ulp-offer-price strong{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--hh-heading-color)}
.hh-ulp-offer-price span{font-size:.78rem;color:var(--hh-muted-color)}
.hh-ulp-offer-specs{display:grid;gap:.45rem;margin:0;padding:.9rem 1.2rem 0}
.hh-ulp-offer-specs div{display:flex;justify-content:space-between;gap:1rem;padding-block-end:.45rem;border-block-end:1px dashed var(--hh-border-color,#DCE7F5);font-size:.82rem}
.hh-ulp-offer-specs dt{font-weight:500;color:var(--hh-muted-color)}
.hh-ulp-offer-specs dd{margin:0;font-weight:700;text-align:end;color:var(--hh-heading-color)}
.hh-ulp-offer footer{margin-block-start:auto;padding:1rem 1.2rem 1.1rem}
.hh-ulp-offer footer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;inline-size:100%}
.hh-ulp-empty{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;padding:1.5rem;border:1px dashed rgba(var(--hh-primary-rgb),.35);border-radius:1.4rem;
  background:linear-gradient(135deg,rgba(var(--hh-primary-rgb),.06),transparent)}
.hh-ulp-empty-ic{flex:0 0 auto;display:grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:.9rem;background:linear-gradient(135deg,#6B2BFF,#A07CFF);color:#fff;font-size:1.3rem}
.hh-ulp-empty>div{flex:1 1 20rem}
.hh-ulp-empty h3{margin:0 0 .3rem;font-size:1.2rem;font-weight:800;color:var(--hh-heading-color)}
.hh-ulp-empty p{margin:0;color:var(--hh-muted-color)}

/* nasil calisir (lp_card): koyu bolum, numarali adimlar + rakam kutulari */
.hh-ulp-spot-in{display:grid;gap:2rem;align-items:center}
@media (min-width:992px){.hh-ulp-spot-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem}}
.hh-ulp-spot .hh-title{margin-block:.9rem}
.hh-ulp-spot .hh-lead{margin:0}
.hh-ulp-spot-steps{display:grid;gap:.55rem;margin:1.5rem 0 0;padding:0;list-style:none}
.hh-ulp-spot-steps li{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem .9rem;border:1px solid rgba(160,124,255,.16);border-radius:.9rem;background:rgba(255,255,255,.03);font-size:.9rem;color:#CFC9EE}
.hh-ulp-spot-steps span{flex:0 0 auto;padding-block-start:.12rem;font-family:var(--hh-mono);font-size:.72rem;font-weight:700;color:#A07CFF}
.hh-ulp-spot-stats{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:.7rem;padding:1.4rem;border:1px solid rgba(160,124,255,.25);border-radius:1.4rem;
  background:linear-gradient(135deg,rgba(107,43,255,.24),rgba(255,255,255,.02))}
.hh-ulp-spot-art{position:absolute;z-index:-1;inset-inline-end:-12%;inset-block-end:-14%;inline-size:72%;opacity:.3;pointer-events:none}
.hh-ulp-spot-stats div{display:flex;flex-direction:column;padding:.9rem 1rem;border:1px solid rgba(160,124,255,.2);border-radius:.9rem;background:rgba(10,7,30,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hh-ulp-spot-stats b{font-family:var(--hh-mono);font-size:1.15rem;font-weight:700;color:#fff}
.hh-ulp-spot-stats span{font-size:.8rem;color:#A9A2CF}

/* hangi paket ne icin: kucukten buyuge olcekli kartlar */
.hh-ulp-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.hh-ulp-guide-card{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1.25rem;background:var(--hh-surface-bg,#fff);
  box-shadow:0 14px 30px -24px rgba(42,20,128,.45);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.hh-ulp-guide-card:hover{transform:translateY(-3px);border-color:rgba(var(--hh-primary-rgb),.4)}
.hh-ulp-guide-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.hh-ulp-guide-no{font-family:var(--hh-mono);font-size:.8rem;font-weight:700;color:#A07CFF}
.hh-ulp-guide-chip{padding:.2rem .6rem;border-radius:999px;background:rgba(var(--hh-primary-rgb),.1);color:var(--hh-primary);font-size:.72rem;font-weight:700}
.hh-ulp-guide-meter{display:block;overflow:hidden;block-size:.3rem;border-radius:1rem;background:rgba(var(--hh-primary-rgb),.1)}
.hh-ulp-guide-meter i{display:block;inline-size:min(100%,var(--w,33%));block-size:100%;border-radius:inherit;background:linear-gradient(90deg,#A07CFF,var(--hh-primary))}
.hh-ulp-guide-card h3{margin:0;font-size:1.1rem;font-weight:800;color:var(--hh-heading-color)}
.hh-ulp-guide-card p{margin:0;font-size:.88rem;line-height:1.6;color:var(--hh-muted-color)}
.hh-ulp-checks{display:grid;gap:.4rem;margin:.2rem 0 0;padding:0;list-style:none}
.hh-ulp-checks li{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;line-height:1.5;color:var(--hh-heading-color)}
.hh-ulp-checks i{flex:0 0 auto;margin-block-start:.12rem;color:var(--hh-primary)}

/* one cikanlar: bento, ilk kutu buyuk ve koyu (urunun kapagi / cizimiyle) */
.hh-ulp-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.hh-ulp-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:.55rem;padding:1.3rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1.25rem;
  background:var(--hh-surface-bg,#fff);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.hh-ulp-tile:hover{transform:translateY(-3px);border-color:rgba(var(--hh-primary-rgb),.4);box-shadow:0 26px 50px -34px rgba(var(--hh-primary-rgb),.6)}
.hh-ulp-tile.is-lead{grid-row:span 2;justify-content:flex-end;min-block-size:22rem;border-color:rgba(160,124,255,.3);color:#CFC9EE;
  background:radial-gradient(70% 55% at 50% 30%,rgba(var(--lp-glow),.35),transparent 70%),linear-gradient(160deg,#170D40,#2A1480 70%,#3B1BA8)}
.hh-ulp-tile-art{position:absolute;z-index:-1;inset:0 0 38%;display:grid;place-items:center;padding:1rem}
.hh-ulp-tile-art img{max-inline-size:88%;max-block-size:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hh-ulp-tile.is-lead:hover .hh-ulp-tile-art img{transform:translateY(-6px) scale(1.03)}
.hh-ulp-tile-art.is-cover{inset:0;padding:0}
.hh-ulp-tile-art.is-cover img{inline-size:100%;max-inline-size:none;block-size:100%;max-block-size:none;object-fit:cover;opacity:.55;filter:none;
  -webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 85%);mask-image:linear-gradient(180deg,#000 25%,transparent 85%)}
.hh-ulp-tile-ic{display:grid;place-items:center;inline-size:2.6rem;block-size:2.6rem;border-radius:.8rem;background:linear-gradient(135deg,#6B2BFF,#A07CFF);color:#fff;font-size:1.15rem;
  box-shadow:0 10px 20px -10px rgba(107,43,255,.9)}
.hh-ulp-tile h3{margin:.3rem 0 0;font-size:1.05rem;font-weight:800;color:var(--hh-heading-color)}
.hh-ulp-tile p{margin:0;font-size:.88rem;line-height:1.6;color:var(--hh-muted-color)}
.hh-ulp-tile.is-lead h3{font-size:1.3rem;color:#fff}
.hh-ulp-tile.is-lead p{color:#CFC9EE}
/* son satirda tek / iki kutu kalirsa satiri doldurur (6, 9 ozellik: tam satir; 7: iki sutun) */
.hh-ulp-tile:nth-child(6):last-child,.hh-ulp-tile:nth-child(9):last-child{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:1rem}
.hh-ulp-tile:nth-child(6):last-child p,.hh-ulp-tile:nth-child(9):last-child p{flex:1 1 20rem}
.hh-ulp-tile:nth-child(6):last-child h3,.hh-ulp-tile:nth-child(9):last-child h3{margin:0;flex:0 0 auto}
.hh-ulp-tile:nth-child(7):last-child{grid-column:span 2}
@media (max-width:991.98px){
  .hh-ulp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-ulp-tile.is-lead{grid-column:1/-1;grid-row:auto;min-block-size:19rem}
  .hh-ulp-tile:nth-child(7):last-child{grid-column:1/-1}
}
@media (max-width:575.98px){.hh-ulp-bento{grid-template-columns:minmax(0,1fr)}}

/* paneller: biri acik, biri koyu mor */
.hh-ulp-panels{display:grid;gap:1rem}
@media (min-width:992px){.hh-ulp-panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hh-ulp-panel{display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.4rem,1rem + 1.5vw,2.2rem);border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1.5rem;background:var(--hh-surface-bg,#fff)}
.hh-ulp-panel.is-dark{position:relative;isolation:isolate;overflow:hidden;border-color:rgba(160,124,255,.3);color:#CFC9EE;background:linear-gradient(150deg,#170D40,#2A1480 65%,#4B1FD0)}
.hh-ulp-panel.is-dark:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%)}
.hh-ulp-panel-kicker{font-family:var(--hh-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hh-primary)}
.hh-ulp-panel.is-dark .hh-ulp-panel-kicker{color:#A07CFF}
.hh-ulp-panel h2{margin:0;font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);font-weight:800;letter-spacing:-.02em;color:var(--hh-heading-color)}
.hh-ulp-panel.is-dark h2{color:#fff}
.hh-ulp-panel p{margin:0;line-height:1.65;color:var(--hh-muted-color)}
.hh-ulp-panel.is-dark p{color:#CFC9EE}
.hh-ulp-panel.is-dark .hh-ulp-checks li{color:#E4DAFF}
.hh-ulp-panel.is-dark .hh-ulp-checks i{color:#A07CFF}
.hh-ulp-panel-stats{display:grid;gap:.6rem;margin-block-start:.3rem}
.hh-ulp-panel-stats div{padding:.85rem 1rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:.9rem;background:var(--hh-paper,#F4F6FA)}
.hh-ulp-panel.is-dark .hh-ulp-panel-stats div{border-color:rgba(160,124,255,.22);background:rgba(10,7,30,.4)}
.hh-ulp-panel-stats b{display:block;margin-block-end:.2rem;font-weight:800;color:var(--hh-heading-color)}
.hh-ulp-panel.is-dark .hh-ulp-panel-stats b{color:#fff}
.hh-ulp-panel-stats span{font-size:.86rem;line-height:1.55;color:var(--hh-muted-color)}
.hh-ulp-panel.is-dark .hh-ulp-panel-stats span{color:#CFC9EE}

/* adimlar: numarali kartlar, aralarinda baglanti cizgisi */
.hh-ulp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin:0;padding:0;list-style:none}
.hh-ulp-step{position:relative;padding:1.3rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1.25rem;background:var(--hh-surface-bg,#fff)}
.hh-ulp-step-no{display:grid;place-items:center;inline-size:2.8rem;block-size:2.8rem;margin-block-end:.9rem;border-radius:.9rem;background:linear-gradient(135deg,#6B2BFF,#A07CFF);color:#fff;
  font-family:var(--hh-mono);font-weight:700;box-shadow:0 12px 24px -12px rgba(107,43,255,.9)}
.hh-ulp-step:not(:last-child):after{content:"";position:absolute;inset-block-start:2.7rem;inset-inline-end:-1rem;inline-size:1rem;block-size:2px;background:linear-gradient(90deg,#A07CFF,rgba(160,124,255,.2))}
.hh-ulp-step h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:800;color:var(--hh-heading-color)}
.hh-ulp-step p{margin:0;font-size:.88rem;line-height:1.6;color:var(--hh-muted-color)}
@media (max-width:767.98px){.hh-ulp-step:after{display:none}}

/* bu sayfanin rehberleri */
.hh-ulp-reads{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:.75rem}
.hh-ulp-read{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1rem;background:var(--hh-surface-bg,#fff);
  color:var(--hh-heading-color);font-weight:600;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,color .25s}
.hh-ulp-read:hover,.hh-ulp-read:focus-visible{transform:translateY(-2px);border-color:rgba(var(--hh-primary-rgb),.45);color:var(--hh-primary)}
.hh-ulp-read-ic{flex:0 0 auto;display:grid;place-items:center;inline-size:2.3rem;block-size:2.3rem;border-radius:.7rem;background:rgba(var(--hh-primary-rgb),.1);color:var(--hh-primary)}
.hh-ulp-read-t{flex:1;min-inline-size:0;font-size:.92rem}

/* cagri bandi */
.hh-ulp-cta{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:1.5rem 2.5rem;align-items:center;padding:clamp(1.6rem,1rem + 2vw,2.75rem);border:1px solid rgba(160,124,255,.3);border-radius:1.75rem;
  color:#CFC9EE;background:linear-gradient(120deg,#170D40 0%,#2A1480 55%,#4B1FD0 100%);box-shadow:0 40px 80px -45px rgba(107,43,255,.85)}
@media (min-width:992px){.hh-ulp-cta{grid-template-columns:minmax(0,1fr) auto}}
.hh-ulp-cta-art{position:absolute;z-index:-1;inset-inline-end:-3%;inset-block-start:50%;inline-size:min(38%,24rem);opacity:.22;transform:translateY(-50%);pointer-events:none}
.hh-ulp-cta-art.is-cover{inset-inline-end:0;inset-block-start:0;inline-size:46%;block-size:100%;object-fit:cover;opacity:.35;transform:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 65%);mask-image:linear-gradient(90deg,transparent,#000 65%)}
.hh-ulp-cta-k{display:inline-flex;padding:.25rem .65rem;border:1px solid rgba(160,124,255,.45);border-radius:999px;background:rgba(10,7,30,.3);font-family:var(--hh-mono);font-size:.64rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#E4DAFF}
.hh-ulp-cta h2{margin:.8rem 0 .4rem;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:#fff}
.hh-ulp-cta p{margin:0;max-inline-size:36rem}
.hh-ulp-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.hh-ulp-cta-actions small{flex-basis:100%;font-size:.78rem;color:#A9A2CF}
.hh-ulp-cta-main{display:inline-flex;align-items:center;gap:.4rem;border-color:#fff;background:#fff;color:#2A1480;font-weight:700;box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.hh-ulp-cta-main:hover,.hh-ulp-cta-main:focus-visible{border-color:#EDE6FF;background:#EDE6FF;color:#2A1480}
.hh-ulp-cta-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.hh-ulp-cta-ghost:hover,.hh-ulp-cta-ghost:focus-visible{background:rgba(255,255,255,.08);color:#fff}

@media (max-width:575.98px){
  .hh-ulp-feats{gap:.45rem}
  .hh-ulp-feats li{align-items:center;gap:.55rem;padding:.6rem .65rem}
  .hh-ulp-feats li>i{inline-size:1.8rem;block-size:1.8rem;font-size:.9rem}
  .hh-ulp-feats b{font-size:.8rem}
  .hh-ulp-feats small{display:none}
  .hh-ulp-art{min-block-size:0}
  .hh-ulp-cover{inline-size:min(100%,16rem);margin-inline:auto}
  .hh-ulp-chips li{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .hh-ulp-cover-shine,.hh-ulp-chips li{animation:none}
  .hh-ulp-cover,.hh-ulp-tile,.hh-ulp-offer,.hh-ulp-guide-card,.hh-ulp-read{transition:none}
}

/* ==== Kategori rehberi (components/category-guide.tpl), yeni tasarim Kasim 2026: numarali kartlar + vurgulu karsilastirma ==== */
.hh-catx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:1rem;margin-block-end:1.5rem}
.hh-catx-card{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.5rem;border:1px solid rgba(var(--hh-primary-rgb),.14);border-radius:1.25rem;
  background:var(--hh-surface-bg,#fff);box-shadow:0 14px 30px -26px rgba(42,20,128,.45);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.hh-catx-card:hover{transform:translateY(-3px);border-color:rgba(var(--hh-primary-rgb),.38)}
.hh-catx-card:before{content:"";position:absolute;inset-block-start:1.4rem;inset-inline-start:0;inline-size:3px;block-size:1.4rem;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#A07CFF,var(--hh-primary))}
.hh-catx-card-no{font-family:var(--hh-mono);font-size:.74rem;font-weight:700;color:#A07CFF}
.hh-catx-card h3{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--hh-heading-color)}
.hh-catx-card p{margin:0;font-size:.92rem;line-height:1.7;color:var(--hh-muted-color)}
.hh-catx-card a{color:var(--hh-primary);font-weight:600;text-decoration:underline;text-decoration-color:rgba(var(--hh-primary-rgb),.35);text-underline-offset:3px}
.hh-catx-card a:hover{text-decoration-color:currentColor}
.hh-catx-card .hh-ulp-checks li span{min-inline-size:0}
/* tek bolum: tam genislik; iki ve ustu izgara */
.hh-catx-cards[data-n="1"]{grid-template-columns:minmax(0,1fr)}
/* karsilastirma: kart gibi, bu sayfanin urunu vurgulu */
.hh-catx .hh-catx-cmp{max-inline-size:none;margin:0;border:1px solid rgba(var(--hh-primary-rgb),.16);border-radius:1.25rem;box-shadow:0 18px 36px -30px rgba(42,20,128,.5)}
.hh-catx .hh-catx-cmp table{--bs-table-bg:transparent}
.hh-catx .hh-catx-cmp caption{padding:1rem 1.25rem .25rem;font-family:var(--hh-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#A07CFF}
.hh-catx .hh-catx-cmp th,.hh-catx .hh-catx-cmp td{padding:.75rem 1.1rem;border-color:rgba(var(--hh-primary-rgb),.1)}
.hh-catx .hh-catx-cmp thead th{font-size:.82rem;font-weight:700;color:var(--hh-heading-color)}
.hh-catx .hh-catx-cmp .is-self{background:rgba(var(--hh-primary-rgb),.06);font-weight:700;color:var(--hh-heading-color)}
.hh-catx .hh-catx-cmp thead .is-self{background:linear-gradient(180deg,rgba(var(--hh-primary-rgb),.16),rgba(var(--hh-primary-rgb),.06));color:var(--hh-primary)}
.hh-catx .hh-catx-cmp tbody tr:last-child .is-self{border-end-start-radius:0}
.hh-catx .hh-catx-cmp a{color:var(--hh-primary)}
[data-bs-theme=dark] .hh-catx .hh-catx-cmp thead .is-self{color:#C9B5FF}
@media (prefers-reduced-motion:reduce){.hh-catx-card{transition:none}}