/* ===================================================================
   Steam KO Pus Calculator - Modern Game Menu Theme v1.7 (Final Cleaned)
   =================================================================== */

/* === GENEL YAPI VE YAN PANEL === */
.skpc-container {
    background-color: #1a1e24;
    color: #cdd3da;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #3a414b;
    display: flex;
    gap: 25px;
    align-items: flex-start;
}
.skpc-main-content {
    flex-grow: 1;
    width: 100%;
}

/* === FİLTRELEME BÖLÜMÜ === */
.skpc-filters {
    background-color: #2c3138;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
    border: 1px solid #4a525d;
}
#skpc-search-input {
    width: 100%;
    padding: 12px 15px;
    background-color: #1a1e24;
    border: 1px solid #4a525d;
    color: #cdd3da;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 15px;
}

/* === AKORDİYON FİLTRE STİLLERİ === */
#skpc-accordion-filters {
    margin-top: 15px;
}
.skpc-accordion-item {
    background-color: #3c424a;
    border: 1px solid #4a525d;
    border-radius: 4px;
    margin-bottom: 5px;
}
.skpc-accordion-header {
    padding: 12px 15px;
    cursor: pointer;
    margin: 0;
    font-size: 15px;
    color: #fff;
    position: relative;
    user-select: none;
}
.skpc-accordion-header::before {
    content: '►';
    margin-right: 10px;
    font-size: 12px;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}
.skpc-accordion-header.active::before {
    transform: rotate(90deg);
}
.skpc-accordion-panel {
    display: none; /* Akordiyonların başlangıçta kapalı gelmesini sağlar */
    padding: 15px;
    background-color: #1a1e24;
    border-top: 1px solid #4a525d;
}

/* === ÜRÜN LİSTESİ (AKORDİYON İÇİ) === */
.skpc-accordion-panel .skpc-product-list-wrapper.skpc-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* === ÜRÜN KARTI === */
.skpc-product-card {
    background-color: #2c3138;
    border: 1px solid #4a525d;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.skpc-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(0, 149, 255, 0.4);
    border-color: #0095ff;
}
.skpc-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    flex-grow: 1;
}
.skpc-price-group {
    margin-bottom: 8px;
    background-color: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 4px;
}
.skpc-price-kc {
    font-size: 1.3em;
    color: #28a745;
    font-weight: bold;
    margin-bottom: 5px;
}
.skpc-real-prices {
    font-size: 0.9em;
    color: #9da3ab;
}
.skpc-duration {
    font-size: 0.8em;
    color: #9da3ab;
    margin-bottom: 12px;
}
.skpc-notes-toggle {
    font-size: 0.85em;
    color: #00aaff;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}
.skpc-notes {
    font-size: 0.85em;
    margin-top: 10px;
    background-color: #1a1e24;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
    color: #cdd3da;
}
/* === SPRITE İKON SİSTEMİ === */
.skpc-icon {
    width: 64px;
    height: 64px;
    background-image: url('../pus_sprite.png');
    background-repeat: no-repeat;
    margin: 0 auto 20px auto;
    border: 2px solid #5a616b;
    border-radius: 4px;
}

/* === SPRITE İKON SİSTEMİ - KOORDİNATLAR (EKSİK OLAN BÖLÜM) === */
.bundle_punishment_stick_spirit300 { background-position: -0px -0px; }
.cospre_bahamut_armor { background-position: -64px -0px; }
.cospre_bahamut_helmet { background-position: -128px -0px; }
.cospre_dragon_wing { background-position: -192px -0px; }
.cospre_gryphon_armor { background-position: -256px -0px; }
.cospre_gryphon_helmet { background-position: -320px -0px; }
.cospre_janissary_helmet { background-position: -384px -0px; }
.cospre_minerva_package { background-position: -448px -0px; }
.cospre_valkyrie_armor { background-position: -512px -0px; }
.cospre_valkyrie_helmet { background-position: -576px -0px; }
.cospre_yeniceri_armor { background-position: -640px -0px; }
.coupon_chaos_map { background-position: -704px -0px; }
.scroll_int15_30lu { background-position: -768px -0px; }
.item_ancient_text { background-position: -832px -0px; }
.item_merchant_concentration_10lu { background-position: -896px -0px; }
.package_pathos_2gloves { background-position: -960px -0px; }
.pet_astarod { background-position: -0px -64px; }
.pet_cuff_binder { background-position: -64px -64px; }
.pet_giga_hammer { background-position: -128px -64px; }
.pet_krowaz { background-position: -192px -64px; }
.pet_pidama { background-position: -256px -64px; }
.pet_von_eblis { background-position: -320px -64px; }
.potion_blue_def60_10dk { background-position: -384px -64px; }
.premium_bronze_30g { background-position: -448px -64px; }
.premium_dc_30g { background-position: -512px -64px; }
.premium_exp_30g { background-position: -576px -64px; }
.premium_gold_30g { background-position: -640px -64px; }
.premium_platinum_30g { background-position: -704px -64px; }
.premium_switching_30g { background-position: -768px -64px; }
.premium_war_30g { background-position: -832px -64px; }
.scroll_accessory_disassemble { background-position: -896px -64px; }
.scroll_appearance_change_180g { background-position: -960px -64px; }
.scroll_attack20_30lu { background-position: -0px -128px; }
.scroll_character_seal { background-position: -64px -128px; }
.scroll_clan_name_change { background-position: -128px -128px; }
.scroll_defense150_15lu { background-position: -192px -128px; }
.scroll_defense150_30lu { background-position: -256px -128px; }
.scroll_defense300_30lu { background-position: -320px -128px; }
.scroll_defense350_30lu { background-position: -384px -128px; }
.scroll_dex15_10lu { background-position: -448px -128px; }
.scroll_dex15_30lu { background-position: -512px -128px; }
.scroll_duration_double_100lu { background-position: -576px -128px; }
.scroll_familiar_name_change { background-position: -640px -128px; }
.scroll_gender_change { background-position: -704px -128px; }
.scroll_health1000_30lu { background-position: -768px -128px; }
.scroll_health1500_30lu { background-position: -832px -128px; }
.scroll_health2000_30lu { background-position: -896px -128px; }
.scroll_health500_30lu { background-position: -960px -128px; }
.scroll_hp15_10lu { background-position: -0px -192px; }
.scroll_hp15_30lu { background-position: -64px -192px; }
.scroll_hyper_noah_10lu { background-position: -128px -192px; }
.scroll_int15_10lu { background-position: -192px -192px; }
.scroll_lesson_of_master_100lu { background-position: -256px -192px; }
.scroll_lion_10lu { background-position: -320px -192px; }
.scroll_lion_20lu { background-position: -384px -192px; }
.scroll_mp15_10lu { background-position: -448px -192px; }
.scroll_mp15_30lu { background-position: -512px -192px; }
.scroll_name_change { background-position: -576px -192px; }
.scroll_nation_transfer { background-position: -640px -192px; }
.scroll_np50_10lu { background-position: -704px -192px; }
.scroll_prayer_of_priest_atk50_30dk { background-position: -768px -192px; }
.scroll_rebirth_restoration { background-position: -832px -192px; }
.scroll_respawn60_5lu { background-position: -896px -192px; }
.scroll_resurrection80 { background-position: -960px -192px; }
.scroll_str15_10lu { background-position: -0px -256px; }
.scroll_str15_30lu { background-position: -64px -256px; }
.scroll_tears_of_karivdis { background-position: -128px -256px; }
.scroll_teleportation_50lu { background-position: -192px -256px; }
.symbol_gladiator { background-position: -320px -256px; }
.symbol_gladiator_10ea { background-position: -384px -256px; }
.symbol_gladiator_5ea { background-position: -448px -256px; }
.symbol_warrior { background-position: -512px -256px; }
.symbol_warrior_5ea { background-position: -576px -256px; }
.symbol_warrior_10ea { background-position: -704px -384px; }
.tool_arrange_line { background-position: -640px -256px; }
.tool_genie_hammer { background-position: -704px -256px; }
.tool_redistribution { background-position: -768px -256px; }
.tool_spirit_of_genie_10ea { background-position: -832px -256px; }
.tool_trinas_piece { background-position: -896px -256px; }
.transform_cougar_elmorad { background-position: -960px -256px; }
.transform_cougar_karus { background-position: -0px -320px; }
.transform_crisis_elmorad { background-position: -64px -320px; }
.transform_hera_elmorad { background-position: -128px -320px; }
.transform_hera_karus { background-position: -192px -320px; }
.transform_ibex_karus { background-position: -256px -320px; }
.transform_magpie_elmorad { background-position: -320px -320px; }
.transform_magpie_karus { background-position: -384px -320px; }
.transform_menissiah_elmorad { background-position: -448px -320px; }
.transform_menissiah_karus { background-position: -512px -320px; }
.transform_patrick_elmorad { background-position: -576px -320px; }
.transform_patrick_karus { background-position: -640px -320px; }
.voucher_auto_pet_loot_30g { background-position: -704px -320px; }
.voucher_clan_contribution_plus0 { background-position: -768px -320px; }
.voucher_hp_maestro_30g { background-position: -832px -320px; }
.voucher_kaishans_trade_30g { background-position: -896px -320px; }
.voucher_magic_bag_30g { background-position: -960px -320px; }
.voucher_menissiah_list_30g { background-position: -0px -384px; }
.voucher_mp_maestro_30g { background-position: -64px -384px; }
.voucher_nereids_30g { background-position: -128px -384px; }
.voucher_nereids_attack_30g { background-position: -192px -384px; }
.voucher_nereids_defence_30g { background-position: -256px -384px; }
.voucher_oreads_30g { background-position: -320px -384px; }
.voucher_pathos_glove { background-position: -384px -384px; }
.voucher_seal_exchange_10lu { background-position: -448px -384px; }
.voucher_seal_exchange_50lu { background-position: -512px -384px; }
.voucher_vip_vault_key_30g { background-position: -576px -384px; }
.voucher_war_tattoo_30g { background-position: -640px -384px; }


/* ===================================================================
   Aşama 2: PUS Planlayıcı Miktar Yönetimi Stilleri (Düzeltilmiş)
   =================================================================== */

#skpc-planner-items li {
    display: block;
    padding: 15px 10px;
}

.skpc-planner-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.skpc-planner-item-price {
    font-size: 0.9em;
    color: #9da3ab;
}

.skpc-planner-item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Tüm elemanları dikeyde ortalar */
}

.skpc-qty-manager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skpc-qty-btn, .skpc-remove-item {
    background-color: #4a525d;
    color: #fff;
    border: 1px solid #5a616b;
    width: 28px;
    height: 28px;
    border-radius: 4px; /* Köşeli yapar */
    font-weight: bold;
    cursor: pointer;
    display: flex; /* İçindeki simgeyi ortalamak için */
    align-items: center; /* İçindeki simgeyi dikeyde ortalar */
    justify-content: center; /* İçindeki simgeyi yatayda ortalar */
    padding: 0;
    font-size: 16px;
    transition: background-color 0.2s, border-color 0.2s;
}

.skpc-qty-btn:hover, .skpc-remove-item:hover {
    background-color: #5a616b;
    border-color: #7a828d;
}

.skpc-remove-item {
    background-color: #d9534f; /* Silme butonu rengi */
    border-color: #d43f3a;
    font-size: 20px;
}
.skpc-remove-item:hover {
    background-color: #c9302c;
    border-color: #ac2925;
}

.skpc-qty-value {
    font-size: 1.1em;
    font-weight: bold;
    min-width: 20px; /* Sayı değişse de genişliğin oynamaması için */
    text-align: center;
}

/* === MOBİL UYUMLULUK (RESPONSIVE) === */
@media (max-width: 992px) {
    .skpc-container {
        flex-direction: column;
    }
    #skpc-planner-sidebar {
        width: 100%;
        position: static;
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    .skpc-accordion-panel .skpc-product-list-wrapper.skpc-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
.skpc-container { position: relative; }
.skpc-container::before {
  content: attr(data-watermark);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-weight: 700;
  font-size: clamp(28px, 10vw, 120px);
  opacity: .08;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.skpc-brand-badge {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 12px; opacity:.7; background:#000; color:#fff;
  padding: 4px 8px; border-radius: 6px; pointer-events:none;
}
* köşe rozeti için konteyner konumlandırma */
.skpc-container { position: relative; }

/* köşe rozeti (sağ-alt) */
.skpc-container::after {
  content: "© EvdekilerZionda.online";
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.65);
  color: #fff;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(2px);
}

/* küçük ekranlarda biraz küçült */
@media (max-width: 640px) {
  .skpc-container::after {
    font-size: 11px;
    right: 8px;
    bottom: 8px;
  }
}